一、React旧生命周期

  1. 初始化阶段：由ReactDoM.render()触发—初次渲染

    • constructor
    • componentWillMount()
    • render()
    • componentDidMount() =====＞常用
      • 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

  2. 更新阶段：由组件内部this.setsate()或父组什render触发

    • shouldComponentUpdate()
    • componentWillUpdate()
    • render()
    • componentDidUpdate()

  3. 卸载组件：由ReactDoM.unmountcomponentAtNode()触发

    • componentWillUnmount()====> 常用
      • 一般在这个钩子中做-些收尾的事，例如：关闭定时器、取消订阅消息

二、React新生命周期

  1. 初始化阶段：由ReactDoM.render()触发—初次渲染
    • constructor()
    • getDefivedStateFromProps
    • render()
    • componentDidMount()
  2. 更新阶段: 由组件内部this.state()或父组件重新render触发
    • getDerivedStateFromProps
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate
    • componentDidUpdate()
  3. 卸载组件: 由ReactDOM. unmountComponentAtNode()触发
    • componentwillUnmount()

三、React新旧生命周期对比

废弃或不推荐使用三个钩子，新增两个钩子

1
2
3
4
5
6
7
componentWillMount                    
conponentWillReceiveProps  
componentWillUpdate		
            
使用场景不多，使用时在前面加static
getDerivedStateFromProps（若state的值在任何时候都取决于props）
getSnapshotBeforeUpdate