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_前缀才能使用，
//以后可能会被彻底废弃，不建议使用。