旧版声明周期

总结:

初始化阶段: 由ReactDom.render( 触发 ) --- 初次渲染
  a. constructor()
  b. componentWillMount() 
  c. render()   // ====>必须调用
  d. componentDidMount()  // ===>  常用  (常用来做初始化 请求 订阅)

更新阶段: 由于组件内部 this.setState()或父组件render触发
  a. shouldComponentUpdate()
  b. componentWillUpdate()
  c. render()
  d. componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode(触发)
  a. componentWillUnMount  // ===>常用 (常用移除 销毁 取消订阅)

组件挂载时

1. constructor 构造器
2. componentWillMount 组件将要挂载
3. render
4. componentDidMount 组件挂在完成
// 初始化 >>> 组件将要挂载>>>渲染组件>>> 组件挂载完成

5. componentWillUnMount 组件将要卸载

setState流程

1. shouldComponentUdate  =>true  // 是否可以更新 ->可以(不可以直接结束)   控制组件是否要更新 // 返回是true更新 返回false 中断钩子  不写钩子默认返回true
2. componentWillUpdate  // 准备更新了
3. render                          //  更新/渲染
4. componentDidupdate  // 更新完成

forceUpdate 强制更新

// 使用场景 不修改任何状态数据 强制更新dom
1. componentWillUpdate
2. render
3. componentDidUpdate

父组件render

1. componentWillReceiveProps(props) // 第一次不算 (newProps)  组件将要接受新的props的钩子
2. shouldComponentUdate   // 是否可以更新
3. componentWillUpdate      // 将要更新
4. render                               // 去更新
5. componentDidupdate       // 更新完成

新版生命周期

getDerivedStateFormProps() // 如果state的值任何时候都取决于props,name可以用
getSnapshotBeforeUpdate() // 更新之前的快照 能获取更新前的所有属性 比如 scrollTop

对比

旧版将要删除三个钩子函数
新版新增俩个钩子函数