最近调试React项目的时候，控制台老是输出一些警告信息，比如这样的
1569207926863.jpg
警告
componentWillMount、componentWillReceiveProps已被重命名，并且原生命周期将在React 17.x版本失效。而其提供的链接，不翻墙也打不开。
关于即将过时的生命周期，总共有三个componentWillMount、componentWillReceiveProps以及componentWillUpdate，目前来说（React 16.9.0），这些方法仍然有效，但不建议在新代码中使用它们。
其实在16.3版本，就已经提供了相应的重命名生命周期，以UNSAFE_开头，旧的生命周期函数与新的同时生效；在16.9版本中开启了dev警告，未来将在React 17.x版本中完全弃用，只有新的UNSAFE_生命周期名称将起作用。
在这里，UNSAFE_不是指安全性，而是表示使用这些生命周期的代码在React的未来版本中更有可能出现错误，尤其是在启用异步渲染后。
解决方案
1、直接更改为新的生命周期函数
将代码中的componentWillMount、componentWillReceiveProps、componentWillUpdate函数全部加上UNSAFE_前缀，替换成
UNSAFE_componentWillMount()
UNSAFE_componentWillReceiveProps(nextProps)
UNSAFE_componentWillUpdate(nextProps, nextState)
这样做就不用更改原代码逻辑，不存在改完后出现BUG的问题，但是也只是临时方案，最终还是要迁移到其他生命周期函数的，说不定什么时候UNSAFE_的函数就被完全抛弃了呢。
如果没时间或者要修改的地方太多，想偷下懒的话，可以使用react-codemod脚本自动重命名
cd your_project
npx react-codemod rename-unsafe-lifecycles
有时候可能会出现But before we continue, please stash or commit your git changes.的警告，只需要提交下git代码或者加上--force强制执行。
2、替换为其他生命周期函数
① componentWillMount -> componentDidMount
componentWillMount()会在render之前被调用，因此在此方法中同步调用 setState() 不会触发额外渲染，并且通常都是在构造函数 constructor()中初始化 state。
在大多数情况下，都可以直接将代码移至componentDidMount。而在支持服务器渲染时，当前需要同步提供数据，通常也会在componentWillMount中获取数据(fetching)，但可以使用构造函数constructor代替。
有一个常见的误解，即在componentWillMount中进行获取数据，可以避免出现第一个空渲染状态。 实际上，这是行不通的，因为React总是在componentWillMount之后立即执行render。 如果在componentWillMount触发时数据不可用，则无论在何处启动fetching，第一个渲染器仍将显示加载状态。 这就是为什么在大多数情况下将数据获取(fetching)移到componentDidMount不会产生明显影响的原因。
② componentWillReceiveProps -> componentDidUpdate
componentWillReceiveProps()会在已挂载的组件接收新的 props 之前被调用。如果你需要更新状态以响应 prop 更改（例如，重置它），你可以比较 this.props 和 nextProps 并在此方法中使用 this.setState() 执行 state 转换。
使用此生命周期方法通常会出现 bug 和不一致性：
- 如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用
componentDidUpdate生命周期。 - 如果你使用
componentWillReceiveProps仅在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。 - 如果你使用
componentWillReceiveProps是为了在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用key使组件完全不受控代替。
③ componentWillUpdate -> componentDidUpdate
这是一个组件的示例，该组件在内部状态更改时调用外部函数：
// Before
class ExampleComponent extends React.Component {
componentWillUpdate(nextProps, nextState) {
if (
this.state.someStatefulValue !==
nextState.someStatefulValue
) {
nextProps.onChange(nextState.someStatefulValue);
}
}
}
有时人们使用componentWillUpdate是因为担心当componentDidUpdate触发时，更新其他组件的状态“太晚了”。事实并非如此。React确保在componentDidMount和componentDidUpdate期间发生的任何setState调用在用户看到更新的ui之前被刷新。一般来说，最好避免像这样层叠更新，但在某些情况下它们是必要的（例如，如果在测量渲染的dom元素之后需要定位工具提示）。
不管怎样，在异步模式下为此目的使用componentWillUpdate都是不安全的，因为一次更新可能会多次调用外部回调。相反，应该使用componentDidUpdate生命周期，因为它保证每次更新只调用一次：
// After
class ExampleComponent extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (
this.state.someStatefulValue !==
prevState.someStatefulValue
) {
this.props.onChange(this.state.someStatefulValue);
}
}
}
End
参考链接：
网友评论