React 16.8+的生命周期

目前React 16.8+的生命周期分为三个阶段，分别是挂在阶段、更新阶段、卸载阶段

• 挂载阶段
  • constructor:构造函数，初始化state对象或者给自定义方法绑定this。
  • getDerivedStateFromProps(nextProps,prevState)，这个是静态方法，当我们接收到新的属性想去修改我们state，可以使用getDerivedStateFromProps(新增生命周期)
  • render:render函数是纯函数，只返回需要渲染的内容，不应该包含其它业务逻辑。
  • componentDidMount:组件挂载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅。
• 更新阶段
  • getDerivedStateFromProps:此方法在更新挂载阶段都可能会调用
  • shouldComponentUpdate(nextProps,nextState)，有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true，我们通常利用此声明周期来优化React程序性能。
  • render:更新阶段也会触发此生命周期
  • getSnapshotBeforeUpdate(prevProps,prevState)，这个在render方法之后，Update之前调用，有两个参数prevProps,prevState，表示之前的props和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate,如果你不想要返回值，可以返回null,此生命周期必须与componentDidUpdate搭配使用(新增生命周期)。
  • componentDidUpdate(prevProps,prevState,snapshot)，该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps,prevState,snapshot，表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate返回的，如果触发某些回调函数时需要用到DOM元素的状态，则将对比或计算过程迁移至getSnapshotBeforeUpdate，然后再componentDidUpdate中统一触发回调或更新状态。
• 卸载阶段
  • componentWillUnmount:当我们的组件被卸载或者销毁了就回调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作。