React生命周期详解

旧的生命周期

流程图

三个阶段概述

1、初始化阶段: 由ReactDOM.render() 触发---初次渲染
	1、constructor()
	2、componentWillMount()
	3、render()
	4、componentDidMount()	===>常用
			在这个钩子中做一些初始化的事情，如：开启定时器，发起网络请求，订阅消息
2、 更新阶段: 由组件内部this.setSate()或父组件render触发
	1、shouldComponentUpdate()
	2、componentWillUpdate()
	3、render()
	4、componentDidUpdate()
3、卸载组件: 由ReactDOM.unmountComponentAtNode()触发
	1、componentWillUnmount()	===>常用
			在这个钩子中做首尾的事，如：关闭定时器，取消订阅消息

详解

在代码中钩子的书写顺序跟执行顺序没有关系

• 先看左侧挂载流程，没什么好说的。从初始化数据到组件将要挂载到渲染挂载组件到组件挂载完毕，如下图
  
  componentWillUnmount() 是组件将被卸载时触发，看下边代码

class Life extends React.Component {
		// 省略其他代码
        death = () => {
          ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
        }
        //组件将要被卸载的时候
        componentWillUnmount() {
          console.log('Life---componentWillUnmount')
        }
        // 初始化渲染，状态更新之后
        render() {
          // console.log(this)
          return (
            <div>
              <button onClick={this.death}>卸载组件</button>
            </div>
          )
        }
      }
      ReactDOM.render(<Life />, document.querySelector('#test'))

点击卸载按钮，在卸载该组件之前呢就会触发该钩子：

• 再看右侧的更新流程
  更新组件有三条线，如上图分别已经标注了出来

  先看第一条紫色的线：通过修改state中的数据来更新组件，会按照划线部分执行钩子（如下图结果），需要注意的是shouldComponentUpdate()，这个钩子函数，它必须一个boolean的返回值，如果为true，就继续往下走，若为false即终止更新。这个钩子也可以不写，默认返回值true
  

  在看第二条黄色的线：这是强制更新组件的，即使没有修改数据也会更新。它将shouldComponentUpdate()这个钩子略过了，即使该钩子返回false也不影响我更新组件

  最后看第三条橙色的线：通过父组件向子组件传值来更新组件，注意componentWillReceiveProps()这个钩子，在接收传来的props之前调用，但是第一次传来的props不算，也就不会触发该钩子，不会向下走直至更新组件，是从第二次传的props开始的，才触发钩子继续往下走
  

新的生命周期

流程图

概述

在新的生命周期中应避免 UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps（也就是componentWillMount、componentWillUpdate、componentWillReceiveProps，在17版本之后要给这三个钩子加前缀“UNSAFE_”，不然会有废弃警告）的使用

详解

跟旧的生命周期相比多了两个钩子getDerivedStateFromProps() 和 getSnapshBeforeUpdate()

getDerivedStateFromProps() 不能写在组件实例中，要声明成一个static method，所以在前边加上 static，同时该钩子必须有返回值，其返回值是 null 或者 state obj。它可以接收两个参数（props,state）。此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。
getSnapshotBeforeUpdate()，它返回一个snapshot 值或者 null，返回snapshot，并可以将其作为参数传递给 componentDidUpdate()

总结

重要的三个钩子：render()、componentDidMount()、componentWillUnmount()
即将废弃的三个钩子：componentWillMount()、componentWillReceiveProps()、componentWillUpdate()