react源码分析（14）-react-reconciler分析总结以及从宏观层面看待react

本文链接：https://blog.youkuaiyun.com/weixin_45668912/article/details/122144143

2021SC@SDUSC

react-reconciler图示（推荐打开下方链接，查看清晰原图）

react-reconciler中流程总结（与组件更新为例）

2021SC@SDUSC

react-reconciler图示（推荐打开下方链接，查看清晰原图）

这是我分析的对react-reconciler部分运行的整体介绍图，因为图片太大，这里附加URL。

清晰原图位置：http://123.56.43.101:81/img/introduction2.jpg

react-reconciler中流程总结（与组件更新为例）

现在我们可以总结一下react中reconcile的过程，这里以组件更新为例，首先通过渲染函数到达updateContainer，然后将执行该工作的performConcurrentWorkOnRoot放入调度函数中进行调度（根据优先级放入相应的队列），首先是render阶段，这个阶段先从root节点进行深度遍历进行beginWork，比较current树（已经被渲染的树）与workInProgerss树的区别，组建对应的更新队列，使用DIFF算法判断是否需要更新等操作。当然也会构建新的节点，假如已经没有子节点，那所返回的节点就会直接进入completeWork，另外，假如出现错误边界，那也会直接进入completeWork，在其中进行处理。而在此时会根据workInprogress节点中的属性判断能否进行重复利用，循环判断，从而根据Fiber节点中的属性构建出DOM节点（通常放入stateNode中），并确定其与其他DOM节点的关系。之后通过commitRoot方法进入commit阶段，该阶段需要根据Fiber节点相应的DOM树正式更新并挂载至浏览器上，分为beforeMutation,Mutation,Layout三个阶段，在beforeMutation保存实例更新前的信息并调度useEffect，Mutation会执行DOM操作，执行componentWillUnmount以及执行useLayoutEffect的相关函数操作（注意，往往先执行删除函数，再执行插入与更新操作以防止混乱，提高构建以及更新DOM树的正确性）。Layout会调度类组件中的componentDidUpdate函数以及componentDidMount以及setState，另外会再次调度存在的useEffect函数。commit阶段完成。

代码外的小插曲（开源协议）

react作为facebook生产的开源软件，使用的是BSD+Patents协议，Patents为专利附属条款，规定当使用react的公司与facebook发生专利纠纷时，facebook会收回react的使用权。这造成了react的专利共享问题，百度等公司为此暂停使用react。在apache将该协议列入黑名单之后，不少中小企业为了防止使用react时产生种种纠纷也暂停使用，
因此后来facebook将开源协议更改为更加宽松的MIT协议（该协议允许你以任何形式使用该代码但需要保留版权信息），使人们能够更好的使用react，而无需担心专利问题。关于这件事情的种种争论，在github网站的react相关上依旧能看到曾经的痕迹。

https://github.com/facebook/react/issues/10191

关于种种开源的介绍，这里给出一张导图：

开源协议图

react与vue的比较

1在前面的博客中我已经提到react渲染的种种过程，每当组件的状态改变时，其子节点也需要进行重新渲染。当然，可以使用shouldComponentUpdate这一生命周期函数或者immutable进行优化，另外也可以使用高阶组件（HOC），高阶组件可以对组件逻辑进行复用，通过将一个组件作为参数，用其他数据对该组件的复制品进行包装加工，得到另一个组件来实现。react与vue中的响应式数据不同，状态不可变，实际上react每次更改都会得到另一个新状态。
作为基于MVVM的vue，会自行对数据进行代理与监听，数据是反应式的，只更新需要更新的组件。所以在vue中使用hooks与在react中使用hooks也是不同的，在react中使用hook必须严格顺序，这样形成的effect链才能在每次渲染时对应的上，而在vue中状态作为反应式数据hooks会自动辨认相关数据，不过因此要在vue中对原始数据类型进行代理，需要使用函数获取属性中的值。
2 react中是将所有的文件均作为js处理（通过jsx转为js），而vue对不同的文件类型有不同的处理方式。
3 vue内置较多，react更为灵活。react配套的工具更完善，比如antd UI。react更为适合大型应用。
4 react对移动应用端以及服务端的渲染，这是相较于其他框架的优势，react native以及react包中的react-server分别进行相关处理。
5 在各小程序平台的支持方面，react则似乎与vue差不多。

6 均使用了虚拟DOM
7 利用redux，FLUX，vuex等进行组件通讯以及共享状态，不直接使用全局变量的原因是那样不便于状态的调试与追踪。可以通过对特定函数的调用来确定状态的改变。

react中的热点 hooks

react背后有强大的开发团队支持，而且相关工具也都非常强大。但概念好多，使用起来不如vue那样简洁明了。但好处在于比较方便协作，而且写起来有种一直在写代码的感觉，而不是在那里写模板。
react hooks是非常有趣的技术特点，hooks使得函数组件也可以进行状态的管理，从而可以进行实际应用。比如useState，对应状态改变的钩子。useEffect 每当状态改变，重新渲染时就会执行（可以指定改变的具体状态）。useReduce,通过发起action至reducer从而改变state。利用useContext进行共享状态。也可以利用这些hooks来自定义hook,但是就像上文中所提到的那样，必须按照顺序，不要在hook外部增添条件，循环等语句。另外，还要以use开头以方便监测。react hooks有助于复用状态逻辑，简化复杂组件。并且使Prepack充分优化前端代码，提高机器效率。react团队一直在关注预编译问题，而函数组件作为比类组件更加能够适应Prepack预处理优化的选择，可能未来会有更多改进。

react18的未来特性

这里只是简单介绍一下，其中包括automatic batching，对状态的批处理，就像上文中所说的那样，如果每次状态更新都需要重新渲染就要进行优化从而提高效率，而automatic batching就会提高更新批处理的范围，startTransition以优化过渡更新，全新的SSR 架构以保证页面的迅速显示（这种情况下会先加载HTML作为显示结果），同时用户可以自己选择到底那些组件进行Hydration，也就是说，提前渲染这些提前出现的选定的HTML并且添加事件处理程序。
这是react18的部分未来特性的介绍。

总结

通过一张图大致的介绍了在react更新时在react-reconciler中的执行流程以及相关操作（包括render阶段中的beginWork,completeWork以及commit阶段中的beforeMutation，Mutation,LayOut等）。另外，还介绍了一下react开源过程的演变，react与vue的比较，react hooks的应用以及react18的未来特性。在这一系列博客中，我因此清楚了react应用中API具体的执行时机，react更新的种种内部流程以及相关的数据结构与原理，并且更加熟悉了react的源码，从而能够更加熟练的将react应用到前端开发当中。