React生命周期详解

一、理解

           -组件从创建到死亡它会经历一些特定的阶段

           -React组件中包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用

           -我们在定义组件时，会在特定的生命周期回调函数，中做特定的工作

二、新版和旧版生命周期

     旧版本：

    

A、初始化阶段: 由ReactDOM.render()触发---初次渲染
       1.constructor()
       2.componentWillMount()
       3.render()
       4.componentDidMount() ===>常用

    一般在这个钩子做一些初始化的事，例如:开启定时器，发送网络请求，订阅消息

B、更新阶段: 由组件内部this.setSate()或(父组件重新render触->componentWillReceiveProps)
       1.shouldComponentUpdate()
       2.componentWillUpdate()
       3.render() 必须用
       4.componentDidUpdate()

C、卸载组件: 由ReactDOM.unmountComponentAtNode()触发
      1.componentWillUnmount() ==>常用

       一般在这个钩子做一些收尾的事,例如：关闭定时器，取消订阅消息

旧版本：

 

生命周期的三个阶段（新）

A.初始化阶段: 由ReactDOM.render()触发---初次渲染
       1.constructor()
       2.getDerivedStateFromProps
       3.render()
      4.componentDidMount()

B.更新阶段：由组件内部this.setSate()或父组件重新render触发

     1.getDerivedStateFromProps
     2.shouldComponentUpdate()
     3.render()
     4.getSnapshotBeforeUpdate
     5.componentDidUpdate()

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

     1. componentWillUnmount()

三、总结一下：

           重要的勾子：

                    1. render：初始化渲染或更新渲染调用

                    2. componentDidMount：开启监听, 发送ajax请求

                    3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

           即将废弃的勾子：

                   1. componentWillMount

                   2. componentWillReceiveProps

                   3. componentWillUpdate

                   4.现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。