为什么使用getDerivedStateFromProps而不是componentDidUpdate？

Question

正如this React Github issue所述，我看到的内容越来越多

  

render()的费用相对较小

在React 16.3 中，我想知道为什么会使用新的getDerivedStateFromProps而不是componentDidUpdate？

想象一下这个例子：

getDerivedStateFromProps(nextProps, prevState) {
  if (!prevState.isModalOpen && nextProps.isReady) {
       return { isModalOpen: true };
  }
}

与

componentDidUpdate(prevProps, prevState) {
  if (!prevState.isModalOpen && this.props.isReady) {
        this.setState({ isModalOpen: true });
  }
}

后者似乎更简单，因为它只使用现有的API，看起来就像我们以前在componentWillReceiveProps中所做的那样，所以我不明白为什么用户会选择getDerivedStateFromProps？有什么好处？

谢谢！

Answer 1

所以Dan Abramov answered on Twitter似乎有2个原因可以使用getDerivedStateFromProps代替componentDidUpdate + setState：

  componentDidUpdate中的

setState会导致额外的渲染（用户无法直接察觉，但会降低您的应用速度）。并且你渲染方法不能假设状态已经准备好（因为它不会是第一次）。

• 表演原因：它避免了不必要的重新渲染。
• 在初始化渲染之前调用getDerivedStateFromProps时，可以在此函数中初始化状态，而不是使用构造函数来执行此操作。 目前，您必须在初始渲染之前使用构造函数或componentWillMount来初始化您的状态。

Answer 2

getDerivedStateFromProps实际上是componentWillReceiveProps的替换，componentDidMount不会被弃用。

我很确定社区决定使用该名称制作静态方法。

此更改的原因是componentWillReceiveProps was one of the methods that led to confusion and further to some memory leaks in user applications：

  

其中许多问题因组件的一部分而加剧   生命周期（componentWillMount，componentWillReceiveProps和   componentWillUpdate）。这些也恰好是生命周期   引起React社区内最混乱。对于这些   原因，我们将弃用这些方法以支持更好的方法   的替代品。

这里的Dan Abramov tweet也使这一点更加明确：

  

然而，这意味着我们将分道扬..   17中的componentWillReceiveProps（）我们认为getDerivedStateFromProps（）   做同样的工作更好，更少混淆。它也发生了   cWRP（）真的搞砸了我们的数据获取功能计划   可能正在筹备中。