在梳理之前,先来了解渲染流程中一个概念---协调
协调(Reconciler)
React 官方文档在对于协调的解释
React 提供的声明式 API 让开发者可以在对 React 的底层实现没有具体了解的情况下编写应用。在开发者编写应用时虽然保持相对简单的心智,但开发者无法了解内部的实现机制。本文描述了在实现 React 的 “diffing” 算法中我们做出的设计决策以保证组件满足更新具有可预测性,以及在繁杂业务下依然保持应用的高性能性。
Reconciler是协助React确认状态变化时要更新哪些Dom元素的diff算法。
Reconciler模块以React 16为分界线分为两个版本:
- Stack Reconciler是React 15及以前版本的渲染方案,其核心是以递归的方式逐级调度栈中子节点到父节点的渲染,无法中断
- Fiber Reconciler是React 16以后版本的渲染方案,核心设计是增量渲染,将渲染工作分割为多个区块,并将其分散到多个帧中去执行。设计初衷是提高React在动画、画布及手势等场景下的性能表现。基于循环遍历diff
两者渲染的性能差距示例: https://claudiopro.github.io/react-fiber-vs-stack-demo/
渲染
Stack Reconciler
Stack Reconciler 没有单独的包,并没有像 Fiber Reconclier 一样抽取为独立的包
堆