react新版本生命周期

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

• 给componentWillMountcomponentWillReceivePropscomponentWillUpdate生命周期加上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替代，它可以帮助你在props的值未发生变化时不需要重复的去计算数据
  • 当props改变时，如果你想要重置一些state，可以考虑使用Fully controlled component(完全移出state的使用，通过父组件控制数据)或者Fully uncontrolled component(数据仅存在内部状态中)，这两个概念也可以在react官方文档中找到示例

getSnapshotBeforeUpdate

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

componentDidCatch

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