我应该如何替换 componentWillMount()？

Question

我正在使用 React.js，如您所知，componentWillMount() 将被弃用。 我想替换我的componentWillMounts。

我将把它的逻辑移到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和public prop的设置状态有什么区别吗？

在构造函数中

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

getDerivedStateFromProps 在调用 render 方法之前被调用，无论是在初始挂载时还是在后续更新时。它应该返回一个对象来更新状态，或者返回 null 来更新任何内容。 因此，如果您只想在安装组件之前执行一次操作，那么 getDerivedStateFromProps 不是合适的选项。

使用 componentDidMount 方法。 在https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html了解更多详情

Answer 3

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

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

Answer 4

使用getDerivedStateFromProps()，它是构造函数之后调用的下一个方法。

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