componentDidUpdate vs componentWillReceiveProps

componentDidUpdate与componentWillReceiveProps区别主要有两点：一是触发的时机；二是在这两个方法中调用更新状态方法后如何更新组件状态。

1. 触发时机

先上一张react生命周期图（图片来源:图解ES6中的React生命周期）

componentDidUpdate有两个参数prevProps和prevState，无论是父组件props的修改还是状态的更改都会触发该方法，而componentWillReceiveProps只有在父组件重新render props改变的时候会触发。

应用场景：当你希望只有在接收到新props时做一些逻辑时，请使用componentWillReceiveProps，如：根据父组件传入的数据初始化或重置某些内部状态。若希望无论props更改还是组件内容状态更改都能触发一些逻辑，那么请使用componentDidUpdate。

2. 两个方法是如何更新组件状态的

若要在props更改时同步更新组件状态，使用componentWillReceiveProps；否则使用componentDidUpdate。

关于componentWillReceiveProps生命周期函数的逐渐替代方案：

react16.3：为不安全生命周期引入别名UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps和UNSAFE_componentWillUpdate。 （旧的生命周期名称和新的别名都可以在此版本中使用。）

后来的16.x版本：为componentWillMount，componentWillReceiveProps和componentWillUpdate启用弃用警告。 （旧的生命周期名称和新的别名都可以在此版本中使用，但旧名称会记录DEV模式警告。）

17.0：删除componentWillMount，componentWillReceiveProps和componentWillUpdate。 （从现在开始，只有新的“UNSAFE_”生命周期名称将起作用。）

后续将采用新的生命周期getDerivedStateFromProps替代componentWillReceiveProps，待研究透彻后将更新文档。

转载于:https://juejin.im/post/5cc57355e51d453f1352be61