React生命周期

v16之前生命周期：

（1）initialization组件初始化阶段

　　

constructor(){
    super(props);
    this.state={}  
}

　　super(props) 调用基类的构造方法，也将父组件的props注入给子组件，供子组件读取props，只读；state初始化 ，可修改

 

（2）Mounting组件挂载阶段

　　componentWillMount：在组件挂载到DOM前调用，且只会调用一次

　　render：根据props和state，return一个React元素

　　componentDidMount：组件挂载到DOM后调用，且只会调用一次

 

　　 componentWillMount =》render =》 componentDidMount

 

（3）update组件更新阶段

　　componentWillReceiveProps(nextProps) ：只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新的props；

　　shouldComponentUpdate(nextProps,nextState)：此方法通过比较nextProps、nextState及当前组件的this.props、this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可减少组件的不必要渲染，优化组件性能；

　　componentWillUpdate(nextProps,nextState)：该方法在调用render方法前执行，可执行一些组件更新发生前的工作

　　componentDidUpdate(prevProps,prevState)：在组件更新后调用，可以操作组件更新的DOM，组件更新前的参数

　　a. 父组件重新render的情况，导致props重传引起的子组件渲染

　　　　componentWillReceiveProps(nextProps) =》shouldComponentUpdate(nextProps,nextState) =》 componentWillUpdate(nextProps,nextState) =》 render =》 componentDidUpdate(prevProps,prevState)

　　b. 组件自身调用setState

　　　　shouldComponentUpdate =》 componentWillUpdate =》 componentDidUpdate

 

（4）unmounting组件卸载阶段

　　componentWillUnmount

 

v16.4生命周期：

　　getDerivedStateFromProps(props,state) ：在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null不更新任何内容

　　getSnapshotBeforeUpdate()：被调用于render之后，可以读取但无法使用DOM的时候。使得组件在可能更改之前从DOM捕获一些信息，如滚动位置。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()

（1）创建时

　　constructor =》getDerivedStateFromProps(props,state) =》 render =》 componentDidMount

（2）更新时

　　getDerivedStateFromProps =》 shouldComponentUpdate =》 render =》 getSnapshotBeforeUpdate =》 componentDidUpdate

（3）卸载时

　　componentWillUnmount