javascript - 人们更喜欢使用 React 组件的构造函数而不是 componentWillMount 有什么原因吗？

Question

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

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

...比使用构造函数稍微简单一些。即因为当您使用构造函数时，您有调用super()。

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

不仅如此，如果您的组件传递了 props 和/或 state，那么您还必须手动传递它们。

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

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

只是好奇是否有实际的实际原因，或者主要是偏好。

Answer 1

构造函数是唯一“正确”初始化(直接分配给)state 的地方。即 this.state = {...}

您在组件中定义的其余函数(componentWillMount 等)被称为“生命周期回调”，由 React 引擎调用。预计 state 在组件的整个生命周期中应该是不可变的，并且绝不能直接分配给它。相反，您必须 this.setState({...}) 才能在构造函数之外的任何位置影响对 state 的任何更改。

虽然您目前的做法到目前为止可能没有引起任何问题，但不能保证以相同的方式继续工作。如果出于某种原因 React 在生命周期回调之间读取 state，并且您在 componentWillMount 回调中对其进行了修改，这可能会产生意想不到的后果。

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

如果冗长是一个问题，并且您的构造函数除了初始化您的 state 没有其他目的，并且您不需要 props 来初始化您的 state，只需声明并初始化你的状态属性:

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