React 16.3.2中UNSAFE_componentWillReceiveProps未触发问题咨询

根据你描述的情况，改回componentWillReceiveProps就能正常执行，但带UNSAFE_前缀的版本却没反应，大概率是以下几个原因之一，你可以逐一排查：

1. React和ReactDOM版本不匹配 #

React 16.3才正式引入UNSAFE_前缀的生命周期方法，如果你只升级了React到16.3.2，但ReactDOM还是低于16.3的旧版本，旧版ReactDOM根本识别不了带UNSAFE_前缀的方法，自然不会触发它。

解决办法：

• 运行npm list react react-dom查看两个包的版本，确保两者完全一致都是16.3.2。
• 如果版本不一致，执行npm install react@16.3.2 react-dom@16.3.2同步版本，之后重启开发服务器。

2. 组件同时实现了getDerivedStateFromProps #

React 16.3推出static getDerivedStateFromProps作为componentWillReceiveProps的替代方案。如果你的组件同时定义了这个静态方法和UNSAFE_componentWillReceiveProps，React会优先调用新的生命周期方法，直接跳过UNSAFE_componentWillReceiveProps。

解决办法：

• 检查组件代码，确认是否存在static getDerivedStateFromProps的定义。
• 如果不需要这个新方法，直接移除它；如果需要保留，把UNSAFE_componentWillReceiveProps里的逻辑迁移到getDerivedStateFromProps中（这也是React官方推荐的迁移方向）。

3. 方法名拼写错误 #

别忽略这个细节！UNSAFE_componentWillReceiveProps的拼写要求很严格：UNSAFE全大写，后跟下划线，再是小写开头的componentWillReceiveProps。如果有任何拼写错误（比如少了下划线、大小写不对），React会把它当成普通自定义方法，不会触发。

解决办法：仔细核对方法名的拼写，确保和官方定义完全一致。

4. 缓存或依赖损坏问题 #

有时候项目缓存或者损坏的依赖也会导致这种奇怪的异常。

解决办法：

• 删除项目的node_modules文件夹和package-lock.json（或yarn.lock）文件。
• 重新执行npm install（或yarn install）安装依赖。
• 重启开发服务器后再测试是否正常触发。

内容的提问来源于stack exchange，提问作者Július Retzer