react新版本生命周期 - 好文

react发布16版本后有了很多新增特性，之前有一直看这些新的变化但是却没有做什么总结，这里对生命周期的变化作个记录~~后面也会继续总结其他的新特性，仅仅观看下面的介绍你可能不能够了解它们的作用，你可以参照
官方API
<https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops>
完成一些demo来加深了解，如果发现错误请告诉我

* 给componentWillMount componentWillReceiveProps componentWillUpdate生命周期加上
UNSAFE_前缀，表明其不安全性，并将在未来版本将其移除(添加UNSAFE_前缀是在16.3版本，但是仍然可以使用这三个生命周期不带前缀的名称，直接移除会在
17.0版本)
* 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本
* 新增生命周期static getDerivedStateFromProps(prevProps, prevState)、
getSnapshotBeforeUpdate(prevProps, prevState) 、componendDidCatch(error, info)
<>static getDerivedStateFromProps(prevProps, prevState)

* 在每次渲染之前都会调用，不管造成重新渲染的原因，不管初始挂载还是后面的更新都会调用，这一点和
UNSAFE_componentWillReceiveProps不同（只有当父组件造成重新渲染时才调用），每次都应该返回一个对象作为state的更新，或者返回
null表示不更新
* 它的使用场景一般为依赖于props的变化去做一些状态的更新,让我们能够根据props的变化去更新内部的状态，以前我们经常在
componentWillReceiveProps中完成该操作
* 但是你需要考虑是否真的有必要使用这个生命周期，比如：
* 如果你需要根据网络请求获取数据，你可以在componentDidUpdate里完成
* 当props改变时，你需要去重新计算某些数据，可以使用memoization helper
<https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization>
替代，它可以帮助你在props的值未发生变化时不需要重复的去计算数据
* 当props改变时，如果你想要重置一些state，可以考虑使用Fully controlled component(完全移出state
的使用，通过父组件控制数据)或者Fully uncontrolled component(数据仅存在内部状态中)，这两个概念也可以在react官方文档中找到示例
<>getSnapshotBeforeUpdate

在最新的渲染数据提交给DOM前会立即调用，它让你在组件的数据可能要改变之前获取他们，他的返回值会被传递给componentDidUpdate的第三个参数

<>componentDidCatch

如果一个组件定义了componentDidCatch
生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，就像使用了try catch
，不会将错误直接抛出了，保证应用的可用性)

热门工具换一换