一篇搞定React生命周期以及执行顺序 v16.8+(前端面试整理)

React 组件生命周期

从事前端工作已经有一段时间，最近在面试求职者的时候发现，React最基础的实例生命周期都说不清楚，也不能说清楚每个生命周期方法具体作用，所以我通过代码+官网文档的形式总结下文。React生命周期可以说是react最基础的知识点，熟练掌握也可以更好的使用和优化react项目。

React 生命周期图谱

React 生命周期函数详细介绍

1.组件挂载过程

1. constructor
2. componentWillMount
3. render
4. componentDidMount

运行过程

1. constructor 初始化整个组件的state 以及调用super(props)
2. componentWillMount 发生在render之前触发，既可以在客户端触发也可以在服务端触发。SSR的时候，无法触发组件的componentDidMount时，需要在该生命周期中调用服务。
3. render 会根据props,state值构建并返回一个新的对象，如果在render中调用其他的自组件，会在这里触发其他自组件的生命周期，知道自组件render完成后，render才结束。
4. componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

2.组件更新过程

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate

运行过程

1.componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
2.shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
3.componentWillUpdate 组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
4.componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

3.组件卸载

1. componentWillUnmount

运行过程

componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。一般在这个地方卸载定时器等

React 生命周期图谱（react16)

上面列举的都是react16之前的生命周期，在react16版本之后，新增了几个新的生命周期来替换之前可能会出问题的生命周期

1. getDerivedStateFromProps

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

getDerivedStateFromProps 方法用来替换 componentWillMount 和 componentWillUpdate，而且新周期函数跟旧周期函数不能同时使用。

2. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

getSnapshotBeforeUpdate（prevProps, prevState） 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate(prevProps, prevState, snapshot)。而且新周期函数跟旧周期函数不能同时使用。