React生命周期各阶段钩子函数解析

挂载阶段【 初始化阶段 】

初始化阶段就是将我们的组件插入到DOM中，只会发生一次

• constructor ：初始化动作，比如： state的定义和初始化赋值、比如非箭头函数的this的绑定
• getDerivedStateFromProps ：这个钩子函数要求要有返回值，返回值是一个新的状态或是null，这个钩子函数 this的值为undefined
  触发条件
  1. 初始化执行一次 - 因为它替代了componentWillMount
  2. props改变可以触发 - 因为它替代了componentWillReceiveProps
  3. state改变也可以触发 - 因为它替代了componentWillUpdate
• componentWillMount/UNSAVE_componentWillMount：表示组件即将挂载，为挂载做准备
• render：通过React.createElement将jsx结构渲染为vdom对象模型， 可以进行this.prop 和 this.state 的计算，
• componentDidMount ：组件挂载结束
  1. 可以做数据请求，然后将数据请求结果给我们的state
  2. 这个阶段已经生成了真实DOM，所以我们做DOM操作
  3. 我们可以做第三方类库实例化

更新阶段

• componentWillReceiveProps/UNSAFE_componentWillReceiveProps：监听属性是否改变，接收nextProps表示修改后的新属性
• getDerivedStateFromProps：这个钩子函数要求要有返回值，返回值是一个新的状态或是null，这个钩子函数 this的值为undefined
  触发条件
  1. 初始化执行一次 - 因为它替代了componentWillMount
  2. props改变可以触发 - 因为它替代了componentWillReceiveProps
  3. state改变也可以触发 - 因为它替代了componentWillUpdate
• shouldComponentUpdate：组件是否应该更新，这个钩子函数可以决定组件是否要更新，必须要有返回值，返回值是布尔值，是性能优化的方案，减少重新渲染
• componentWillUpdate/UNSAFE_componentWillUpdate：组件即将更新
• render：更新阶段也会再次出发
• getSnapshotBeforeUpdate：这个钩子存在的意义就是通过返回值给componentDidUpdate传递一个数据
• componentDidUpdate：组件更新结束
  1. 真实DOM渲染出来了，可以操作DOM
  2. 第三方库实例化 - 动态数据的实例化

卸载阶段

• componentWillUnmount：表示组件卸载时触发，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作

错误处理阶段

• componentDidCatch(error, info)：记录错误