React Fiber架构

news2024/11/29 1:44:11

说到Fiber，不得不说说他的发展史：

React15 架构

React16之前的版本比对更新虚拟DOM的过程是采用循环递归方式来实现的，这种比对方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中数组数量庞大，主线程被长期占用，直到整颗虚拟DOM树比对更新完成之后主线程才被释放，主线程才能执行其他任务，这就会导致一些用户交互或动画等任务无法立即得到执行，页面就会产生卡顿，非常的影响用户体验。
主要原因就是递归无法中断，执行重的任务耗时较长，javascript又是单线程的，无法同时执行其他任务，导致任务延迟页面卡顿用户体验差。

React15架构可以分为两层：

Reconciler（协调器）—— 负责找出变化的组件 Renderer（渲染器）—— 负责将变化的组件渲染到页面

每当有更新发生时，Reconciler会做如下工作：
- 调用函数组件、或class组件的render方法，将返回的JSX转化为虚拟DOM
- 将虚拟DOM和上次更新时的虚拟DOM对比
- 通过对比找出本次更新中变化的虚拟DOM
- 通知Renderer将变化的虚拟DOM渲染到页面上
而React15使用的是栈调和器，由于递归执行，所以更新一旦开始，中途就无法中断，当调用层级很深时，递归更新时间超过了屏幕刷新时间间隔，用户交互就会卡顿。

react 16架构

React16架构可以分为三层：

Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler
Reconciler（协调器）—— 负责找出变化的组件
Renderer（渲染器）—— 负责将变化的组件渲染到页面上

相比React15，16增加了一个Scheduler（调度器）

并发&调度(Concurrency & Scheduler)
Concurrency 并发: 有能力优先处理更高优事务，同时对正在执行的中途任务可暂存，待高优完成后，再去执行。
Scheduler 协调调度: 在浏览器每一帧的时间中，预留一些时间给JS线程，React利用这部分时间更新组件,当预留的时间不够用时，React将线程控制权交还给浏览器使其有时间渲染UI，React则等待下一帧时间到来，继续被中断的工作。

在源码中，预留的初始时间是5ms

考虑到可中断渲染，并可重回构造。React自行实现了一套体系叫做 React fiber 架构。

Scheduler 运行核心点
- 有个任务队列 queue，该队列存放可中断的任务。
- workLoop对队列里取第一个任务currentTask，进入循环开始执行。
- 当该任务没有时间或需要中断 (渲染任务或其他高优任务插入等)，则让出主线程。
- requestAnimationFrame 计算一帧的空余时间；
- 使用new MessageChannel ()执行宏任务;
  
  Fiber架构
  - 界面通过 vdom 描述，但是不是直接手写 vdom，而是 jsx 编译产生的 render function 之后以后生成的。这样就可以加上 state、props 和一些动态逻辑，动态产生 vdom。
  - vdom 生成之后不再是直接渲染，而是先转成 fiber，这个 vdom 转 fiber 的过程叫做 reconcile。
  - fiber 是一个链表结构，可以打断，这样就可以通过 requestIdleCallback 来空闲调度 reconcile，这样不断的循环，直到处理完所有的 vdom 转 fiber 的 reconcile，就开始 commit，也就是更新到 dom。
  - reconcile 的过程会提前创建好 dom，还会标记出增删改，那么 commit 阶段就很快了。
  - 从之前递归渲染时做 diff 来确定增删改以及创建 dom，提前到了可打断的 reconcile 阶段，让 commit 变得非常快，这就是 fiber 架构的目的和意义。
  Fiber的数据结构有三层信息: （采用链表结构）
- 实例属性
  该Fiber的基本信息，例如组件类型等。
- 构建属性
  构建属性 (return、child、sibling)
- 工作属性
  - 数据的变更会导致UI层的变更
  - 为了减少对DOM的直接操作，通过Reconcile进行diff查找，并将需要变更节点，打上标签，变更路径保留在effectList里
  - 待变更内容要有Scheduler优先级处理涉及到diff等查找操作，是需要有个高效手段来处理前后变化，即双缓存机制。
  - 链表结构即可支持随时随时中断的诉求
  schedule 就是通过空闲调度每个 fiber节点的reconcile（vdom转fiber），全部reconcile完了就执行commit。
  
  React Fiber 核心: 自行实现虚拟栈帧。
  
  总结
  - React16 使用的是全新的"Fiber调和器"，这就依托于React16的重点了—Fiber架构。
  - React16能够实现中断调和，分批次异步地调和。从而达到不因为JS执行时间过久影响浏览器渲染。