构造函数

Question

我正在使用React.js，并且正如您所知，componentWillMount（）将被弃用。我想替换我的componentWillMount。

我将把其逻辑转移到constructor中。在componentWillMount和constructor中执行某些逻辑有什么区别？

例如，

之前

class Hello extends React.Component {
    componentWillMount() {
      doSomething();
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

之后

class Hello extends React.Component {
    constructor(props) {
      super(props);

      doSomething();
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

另外，当doSomething为setState时，构造函数和公共属性中的设置状态是否存在差异？

在构造函数中

constructor(props) {
  super(props);

  this.state = { foo: 1 };
}

以公共道具

state = { foo: 1 };

Answer 1

constructor不是执行某些操作的正确位置。因为它将完成其他操作，直到完成。

componentDidMount是正确的选择，因为它是一个异步函数，因此操作在后台运行，并且不会妨碍UI呈现。

这里是一个list，您可以选择何时在constructor和componentDidMount之间使用：

构造函数

执行：

初始化状态
绑定事件处理程序

如果您不初始化状态并且不绑定方法，则无需实现构造函数。

不要

避免引入任何副作用或订阅。不要在构造函数中使用setState（）来设置状态。

componentDidMount

执行：

需要DOM节点的初始化
从远程终结点加载数据（实例化网络请求）
设置所有订阅（不要忘记在componentWillUnmount（）中退订）

您可能还对React的创建者Dan Abramov的read the comment感兴趣：

我不想等待组件挂载以调度ajax调用来满足组件数据依赖性。我想尽快做到这一点，就像在构造函数中一样，甚至在componentWillMount中也是如此。

如果这是一个异步请求，则无论组件在哪里安装，无论如何都无法在组件安装时完成它。这是因为JS是单线程的，并且在我们仍在渲染时，网络请求无法“返回”并得到处理。因此，提前触发和延迟触发之间的差异通常可以忽略不计。

您是正确的，尽管在少数情况下这很重要，但在某些情况下，取消建议可能很有意义。但是您应该格外谨慎，因为状态可以在安装前进行更新，并且如果您的数据取决于状态，则在这种情况下可能必须重新提取。换句话说：如有疑问，请在componentDidMount中进行。

避免在构造函数和Will *生命周期中产生副作用的具体建议与我们正在进行的更改有关，以允许呈现异步和可中断的更改（部分是为了更好地支持此类用例）。我们仍在弄清楚它应该如何工作的确切语义，因此目前我们的建议更加保守。随着我们在生产中更多地使用异步渲染，我们将在不牺牲效率或正确性的情况下提供有关在何处触发请求的更具体的指导。但是就目前而言，为异步渲染提供一条清晰的迁移路径（从而在我们的建议中更加保守）更为重要。

为进一步引起兴趣，您也可以visit this post。

Answer 2

构造函数中的setState将执行不必要的计算，如果需要执行更多计算或访问道具，则可以按照建议使用state属性，也可以在构造函数中使用this.state = { ... }。

React documentation建议您在componentWillMount上使用构造函数（或类属性）来初始化状态。对于可能更新状态的副作用（例如http请求），您应该考虑componentDidMount或componentDidUpdate。使用异步状态更新，您应始终确保组件在没有该数据的情况下处理状态。

Answer 3

getDerivedStateFromProps会在调用render方法之前（无论是在初始安装还是在后续更新中）都被调用。它应该返回一个对象以更新状态，或者返回null则不更新任何内容。因此，如果要在组件安装之前仅执行一次某些操作，那么getDerivedStateFromProps是不合适的选择。

使用componentDidMount方法。在https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

中有更多详细信息

Answer 4

使用sqlserver.exe是构造函数之后调用的下一个方法。

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

我应该如何替换componentWillMount（）？

4 个答案:

构造函数

componentDidMount