React生命周期详解

参考来源于魔术师卡颂，个人理解的可能不是很正确，可以参考文章底链接。侵权删文。

一、概念

我们可以将React的渲染看做 UI=fn(state)

state这部分可以被称为reconciler,用于计算出状态变化。
fn这部分可以被称为renderer,用于将状态变化渲染在视图中。

reconciler中有一个reconcile算法（即diff算法）。
renderer(渲染器)在React的表示是一个ReactDOM渲染器。

二、渲染过程

首先，我们先了解一下React的生命周期钩子函数。
如图所示，我们可以将其分为俩个阶段---> render阶段执行和commit阶段执行。
或者用组件的四种状态将其划分，即Mount首屏状态渲染时、Update更新时、Unmount卸载时和Error子孙节点发生错误时。

图中标红的三个生命周期函数，在React17中已经被废弃了，不建议大家使用。
而替代它们的，就是这俩个标绿的函数。在React16.3时引入。
注意：在一个组件中，不要同时使用标红和标绿的函数，React会报错。

生命周期函数流程图.png

然后，我们来了解一下React组件的渲染过程。

第一部分：初始渲染。

1. 初始渲染时，调用ReactDOM.render。React的组件会形成一棵组件树。

2. 进入render阶段。在render阶段，会执行 constructor、getDerivedStateFromProps/componentWillMount、render这三个函数。

3. 采用深度优先遍历创建fiber树（即虚拟dom树）。从根节点开始创建。

4. 进入Commit阶段。会先将整棵fiber树对应的DOM渲染到视图中，当渲染完成后，然后从子节点开始执行对应的生命周期函数componentDidMount。

第二部分：重复渲染

1. 当用户执行会触发React重新渲染的操作时。

2. 进入render阶段。

3. 采用深度优先遍历创建fiber树。（每次重新渲染都会创建一棵虚拟DOM树，然后使用diff算法进行比较，如果该节点无变化，则不会触发其生命周期函数。有变化则来到第4步。）

4. reconcile算法标记变化。执行对应的函数shouldComponentUpdate和render

5. 进入Commit阶段。会先将整棵fiber树对应的DOM渲染到视图中，当渲染完成后，然后从子节点开始执行对应的生命周期函数componentDidMount。

6. 执行4中变化对应的视图操作。被reconcile标记变化了的节点会执行getSnapshotBeforeUpdate和componentDidUpdate。

7. 最后，新创建的fiber树会替换掉之前的DOM树，结束。

参考来源：魔术师卡颂（微信公众号、哔哩哔哩同账号）
哔哩哔哩：https://www.bilibili.com/video/BV16t4y1r7oJ

三、生命周期作用详解

constructor() 初始化实例、对事件处理函数绑定实例

static getDrivedStateFromProps(props, state) props值和state值不同时更新。将props映射到state 会在每次组件被重新渲染前被调用, 这意味着无论是父组件的更新, props 的变化, 或是组件内部执行了 setState(), 它都会被调用。

注意：16.3时setState和forceUpdate时不会触发这个函数，16.4之后就会了。

render() 创建虚拟dom,更新dom

componentDidMount() 挂载组件后立即调用。

static getDrivedStateFromProps(props, state)

shouldComponentUpdate() 仅作为性能优化的方式存在，返回true执行render,反之不执行

render()

getSnapshotBeforeUpdate(preprops, prestate ) 在渲染到Dom之前被调用，可在此获得一些数值如滚动位置，作为componentUpdate()的第三个参数传入

componentDidUpdate(preprops, prestate, snapshot) 在更新后被立即调用

componentWillUnmount() 在组件卸载或销毁之前调用，可在此进行清理工作

static getDrivedStateFromError() 渲染阶段被调用

componentDidCatch() 提交阶段被调用