Open 981377660LMT opened 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 基于协程架构的启发式更新算法:控制协程架构工作方式的算法
React 能否像 Vue 那样进行预编译优化?
JSX 和手写的 render function是完全动态的,过度的灵活性导致运行时可以用于优化的信息不足。
React Fiber 是如何实现更新过程可控?
浏览器的一帧做了什么
https://zhuanlan.zhihu.com/p/390409316 最影响前端开发体验的地方,一个会造成卡顿,一个会造成白屏,制约着快速响应:
为此 react 为前端引入了两个新概念:Time Slicing 时间分片和Suspense。