Question

我发现使用生命周期方法componentWillMount来设置初始状态...

componentWillMount() {
  this.state = {
    comments: []
  };
}

...比使用构造函数稍微简单一些。也就是因为当你使用构造函数时，你有来调用super()。

constructor() {
  super();
  this.state = {
    comments: []
  };
}

不仅如此，如果您的组件已通过props和/或state，那么您还必须手动传递这些组件。

constructor(props, state) {
  super(props, state);
  ...
}

我在使用componentWillMount时没有遇到任何问题，但我几乎从未见过有人使用它来设置状态（除非他们避免使用es6并且没有课程）。我知道我们可以访问es6类中的构造函数，但是为什么在必须将手动passthrough连接到父构造函数时使用它，并且有一个非常好的生命周期方法准备好等待所以你不必那样做？

只是好奇是否存在实际的实际原因，或者它是否只是偏好。

Answer 1

构造函数是唯一正确的＃34;初始化（直接分配给）state的地方。即this.state = {...}

您在组件（componentWillMount等）中定义的其余功能被称为＆＃34;生命周期回调＆＃34;由React引擎调用。期望state在组件的整个生命周期中都是不可变的，并且永远不能直接分配给它。相反，您必须this.setState({...})才能在构造函数之外的任何位置对state进行任何更改。

虽然您目前的做法可能不会导致任何问题，但并不能保证以同样的方式继续工作。如果由于某种原因，React在生命周期回调之间读取state，并且您已在componentWillMount回调中对其进行了变更，则可能会产生意外后果。

我的建议是只在构造函数中直接初始化state，并在其他地方使用setState。

如果详细程度是一个问题而构建者没有其他目的而不是初始化state，并且您不需要props初始化state，只需声明并初始化你的州财产：

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

Answer 2

根据DOCS：

通常，我们建议使用构造函数（）。

它还提到：

这是在服务器渲染上调用的唯一生命周期钩子。

所以我想这可能是原因的一部分。

人们更喜欢使用React组件的构造函数而不是componentWillMount吗？

2 个答案: