981377660LMT
commented
1 year ago React15架构可以分为两层：
Reconciler（协调器）—— 负责找出变化的组件； Renderer（渲染器）—— 负责将变化的组件渲染到页面上；
从v15到v16，React团队花了两年时间将源码架构中的Stack Reconciler重构为Fiber Reconciler。
React16架构可以分为三层：
Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler；(为了兼容低版本的浏览器，对该RequestIdleCallback方法进行了 Polyfill。) Reconciler（协调器）—— 负责找出变化的组件：更新工作从递归变成了可以中断的循环过程。Reconciler内部采用了Fiber的架构； Renderer（渲染器）—— 负责将变化的组件渲染到页面上。
React 17 优化 React16的expirationTimes模型只能区分是否>=expirationTimes决定节点是否更新。React17的lanes模型可以选定一个更新区间，并且动态的向区间中增减优先级，可以处理更细粒度的更新。
React 18 Concurrent Mode的目的是实现一套可中断/恢复的更新机制。其由两部分组成： 一套协程架构：Fiber Reconciler 基于协程架构的启发式更新算法：控制协程架构工作方式的算法
https://zhuanlan.zhihu.com/p/390409316 最影响前端开发体验的地方，一个会造成卡顿，一个会造成白屏，制约着快速响应:
为此 react 为前端引入了两个新概念：Time Slicing 时间分片和Suspense。