关于react.js:react组件的新旧生命周期

1、生命周期（旧）

1. constructor：结构器，能够用来初始化数据和接管参数props
2. componentWillMount：组件将要挂载的钩子
3. render：数据渲染，组件挂载在页面上的钩子
4. 罕用 componentDidMount：组件挂载结束的钩子, ———-> 罕用
   ————–> 个别做初始化的事件，例如：开启定时器，发送网络申请，订阅音讯
5. 罕用 componentWillUnmount：组件将要卸载的钩子, ———-> 罕用
   ————–> 个别做一些收尾的事件，敞开定时器，勾销订阅音讯
6. shouldComponentUpdate：管制组件更新的阀门，必须 return true/false; 通过 setState 进行触发
7. componentWillUpdate：组件将要更新的钩子，当 shouldComponentUpdate 返回 false 时，不触发，也能够通过 this.forceUpdate() 强行触发
8. componentDidUpdate：组件更新结束的钩子
9. componentWillReceiveProps：子组件接管父组件参数时调用（第一次除外）

总结归类

• 初始化阶段: 由 ReactDOM.render()触发 — 首次渲染

  1.constructor()
  2.componentWillMount()
  3.render()
  4.componentDidMount()

• 更新阶段: 由组件外部 this.setSate()或父组件从新 render 触发

      1.shouldComponentUpdate()
      2.componentWillUpdate()
      3.render()
      4.componentDidUpdate()

• 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发

  1.componentWillUnmount()

2、生命周期（新）

总结归类

• 初始化阶段: 由 ReactDOM.render()触发 — 首次渲染

  1.constructor()
  2.getDerivedStateFromProps 
  3.render()
  4.componentDidMount()

• 更新阶段: 由组件外部 this.setSate()或父组件从新 render 触发

  1.getDerivedStateFromProps
  2.shouldComponentUpdate()
  3.render()
  4.getSnapshotBeforeUpdate// 在更新之前获取快照
  5.componentDidUpdate()

• 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发

  1.componentWillUnmount()

3、重要的钩子

1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax 申请
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

4、行将废除的钩子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
// 当初应用会呈现正告，下一个大版本须要加上 UNSAFE_前缀能力应用，// 当前可能会被彻底废除，不倡议应用。