React技术解密

Tags: 前端源码
创建时间: April 18, 2022
评星: ⭐️⭐️⭐️⭐️⭐️

问题列表：

React理念

官方定义：我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。

制约快速响应的因素？

React如何解决上述两个瓶颈？

实现了时间切片，将同步的更新变为可中断的异步更新。GUI渲染线程与JS线程是互斥的。所以JS脚本执行和浏览器布局、绘制不能同时执行。当JS执行时间过长，大于16ms时，将咩有时间执行页面布局和样式绘制了，结果就是掉帧卡顿。
将人机交互研究的结果整合到真实的 UI 中 (opens new window)

React15架构可以分为两层

Reconciler（协调器）：负责找出变化的组件
- setState、forceUpdate、render等API触发更新
- 调用函数组件、或class组件的render方法，将返回的JSX转化为虚拟DOM
- 将虚拟DOM和上次更新时的虚拟DOM对比
- 通过对比找出本次更新中变化的虚拟DOM
- 通知Renderer将变化的虚拟DOM渲染到页面上
Reander（渲染器）：负责将变化的组件渲染到页面上
- 将变化的组件渲染在当前宿主环境

架构缺点：

由于递归执行，所以更新一旦开始，中途就无法中断。当层级很深时，递归更新时间超过了16ms，用户交互就会卡顿。

React16架构可以分为三层：

Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler
- 浏览器有剩余时间时，进行任务调度
Reconciler（协调器）—— 负责找出变化的组件
- 当Scheduler将任务交给Reconciler后，Reconciler会为变化的虚拟DOM打上代表增/删/更新的标
- 整个Scheduler与Reconciler的工作都在内存中进行。只有当所有组件都完成Reconciler的工作，才会统一交给Renderer。
Renderer（渲染器）—— 负责将变化的组件渲染到页面上
- 根据协调器上虚拟DOM的标记，同步的执行对应DOM操作

代数效应：

将副作用从函数中分离，使函数关注点保持纯粹。对于类似useState、useReducer、useRef这样的Hook，我们不需要关注FunctionComponent的state在Hook中是如何保存的，React会为我们处理。

Fiber的三层含义：

之前React15的协调器(Reconciler)采用递归的方式执行，React16的协调器基于Fiber节点实现，被称为Fiber Reconciler
作为静态数据结构，每个Fiber节点对应一个React element
作为动态工作单元，每个Fiber街电保存本次更新中组件改变的状态、增删改的信息

Fiber树结构

如何理解Fiber双缓存树？

所谓缓存，跳过绘制帧过程中，清除当前帧的动作，而是用新的帧直接替换当前帧。避免出现白屏的情况。

这种在内存中构建并直接替换的技术叫“双缓存”。

为了降低算法复杂度，React的diff会预设三个限制：