React生命周期

组件的生命周期

所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数

生命周期演变

• 生命周期，16.3 之前，16.3, 16.4 及之后
• 挂载阶段 （组件创建–>把组件创建的虚拟 DOM，生成真实 DOM，添加到我们的 DOM 树中）
  • constructor
  • static getDerivedStateFromProps(props)
    • 注意 this 问题
  • render
  • componentDidMount – 处理副作用(请求)
• 更新阶段 – 组件重新渲染 - static getDerivedStateFromProps(props, state) - shouldComponentUpdate() – 判断是否更新 - render() - getSnapshotBeforeUpdate() - componentDidUpdate() – 处理副作用(请求)
• 卸载阶段
  • componentWillUnmount – 删除添加在全局的一些信息或操作

挂载阶段

挂载阶段（mount）- 从组件初始化到生成真实DOM节点并挂载真实DOM树中：

• constructor(props) 组件初始化
• static getDerivedStateFromProps(props,state) 将 props 中内容关联到 state 中
  • 注意 this 问题
• render 构建当前组件的虚拟DOM
• componentDidMount 组件挂载完成 - 通常在该生命周期函数，进行副作用处理

副作用处理:

1. 异步请求
2. DOM 获取

更新阶段

更新阶段（update）- 从组件开始更新到修改完成真实的DOM节点：

• static getDerivedStateFromProps(props, state)
• shouldComponentUpdate(nextProps,nextState) – 判断是否更新
  return true 组件更新 || false 不在继续执行更新流程
• render()
• getSnapshotBeforeUpdate(prevProps,prevState) – 获取更新前的DOM快照,该函数执行时react已经完成了新老DOM对比，即将更新真实DOM，我们可以获取更新前的DOM，用于和更新后的DOM进行对比。该方法必须配合 componentDidUpdate 一块使用，该方法的返回值，会变成 componentDidUpdate 的 pervDOM 参数
• componentDidUpdate(prevProps,prevState,pervDOM) – 组件更新完成 处理副作用(请求)

组件在什么情况下会更新：

1. 调用 setState 引起当前组件进行更新
2. 父组件更新，会引起子组件进行更新
3. 调用 forceUpdate 方法强制组件进行更新