在ReactJS中初始化状态的不同方法

Question

这可能是由于ReactJS的开发速度所致，或者仅仅是一些错误信息，但是当阅读有关如何设置状态的文章时，我通​​常会遇到不同的方式。

在构造函数中

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { ... }
    }
}

直接在班上

class MyComponent extends React.Component {
    state = { ... }
}

在ComponentWillMount中

class MyComponent extends React.Component {
    ComponentWillMount() {
        this.state = { ... }
    }
}

选项的多样性经常使我感到困惑，并且使我难以决定如何在组件中设置状态。

我的问题是：设置状态的这些方法之间有什么区别吗？如果是这样，那么每种优点和缺点是什么？

Answer 1

这些基本上都是同一件事，只是语法糖。

在构造函数中

这是将属性附加到类实例的“常规”标准方法。

直接在班上

这只是一个语法糖，它是class fields proposal，目前处于阶段3（01/10/18）。您将需要babel/plugin-proposal-class-properties

在ComponentWillMount中

与constructor版本相同，但在react（which is deprecated by the way）的生命周期方法中。

Answer 2

您现在应该不赞成componentWillMount，并且不应该使用它。至于在构造函数中设置状态还是作为class属性都可以使用，我更喜欢class属性。

Answer 3

这是class field proposal：

class MyComponent extends React.Component {
    state = { ... }
}

它是以下语言的语法糖：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { ... }
    }
}

前者较短，并且由于其简洁性，在编译的React应用程序中可以认为是更可取的，除非需要显式构造函数。

ComponentWillMount生命周期挂钩was renamed to UNSAFE_componentWillMount and deprecated支持构造方法：

  

UNSAFE_componentWillMount（）在挂载发生之前被调用。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染。通常，我们建议使用constructor（）代替初始化状态。