如何迁移到新的React生命周期API？

Question

您已经知道不赞成使用某些生命周期方法，例如componentWillReceiveProps。

好吧，我的代码使用了这种生命周期方法，现在我不知道如何迁移到React的新API。

这是我的用法：

componentWillReceiveProps(nextProps) {
    if (nextProps.newPost) {
        this.props.posts.unshift(nextProps.newPost);
    }
}

在react博客中，我可以读到...

  

与componentDidUpdate一起，此新生命周期应涵盖所有   旧版组件WillReceiveProps的用例。

...但是如何实现呢？

Answer 1

componentDidUpdate()在更新发生后立即被调用。初始渲染未调用此方法。

使用此机会在组件更新后在DOM上进行操作。只要您将当前的道具与以前的道具进行比较，这也是一个进行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

请注意，必须将其包装在上面示例中所示的条件下，否则会导致无限循环。

Answer 2

您可以使用getDerivedStateFromProps或componentDidMount，有运行生命周期的顺序：

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. 渲染
4. getSnapshotBeforeUpdate
5. componentDidUpdate