参考来源于魔术师卡颂，个人理解的可能不是很正确，可以参考文章底链接。侵权删文。
一、概念
我们可以将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会报错。
然后，我们来了解一下React组件的渲染过程。
第一部分：初始渲染。
初始渲染时，调用
ReactDOM.render。React的组件会形成一棵组件树。进入
render阶段。在render阶段，会执行constructor、getDerivedStateFromProps/componentWillMount、render这三个函数。采用深度优先遍历创建
fiber树（即虚拟dom树）。从根节点开始创建。进入
Commit阶段。会先将整棵fiber树对应的DOM渲染到视图中，当渲染完成后，然后从子节点开始执行对应的生命周期函数componentDidMount。
第二部分：重复渲染
当用户执行会触发
React重新渲染的操作时。进入
render阶段。采用深度优先遍历创建fiber树。（每次重新渲染都会创建一棵虚拟DOM树，然后使用diff算法进行比较，如果该节点无变化，则不会触发其生命周期函数。有变化则来到第4步。）
reconcile算法标记变化。执行对应的函数shouldComponentUpdate和render进入
Commit阶段。会先将整棵fiber树对应的DOM渲染到视图中，当渲染完成后，然后从子节点开始执行对应的生命周期函数componentDidMount。执行4中变化对应的视图操作。被
reconcile标记变化了的节点会执行getSnapshotBeforeUpdate和componentDidUpdate。最后，新创建的
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() 提交阶段被调用
