React Fiber VS Vue

React Fiber介绍

React Fiber 是 React 16 中引入的一种新的协调机制，用于实现更高效、更灵活的组件更新和渲染方式。它是 React 内部的一种重要的数据结构和算法。

传统的 React 渲染是基于递归的调和算法，它通过递归遍历组件树，进行组件的更新和渲染。这种方式在大型应用中可能会导致长时间的 JavaScript 执行，从而造成页面卡顿和用户体验不佳。

React Fiber 的目标是通过引入可中断和可恢复的任务调度，将渲染任务切分成多个小任务，使得渲染过程可以中断、暂停或者优先级调整，从而提高页面的响应速度和用户体验。

React Fiber 的核心是一个虚拟的 Fiber 节点树，它与实际的 DOM 结构相对应。每个 Fiber 节点表示一个组件的实例，它包含了组件的状态、属性和其他相关信息。Fiber 节点之间通过引用和指针相互连接，形成了一个链表结构，称为 Fiber 树。

Fiber 关键特性：

1. 增量渲染；
2. 不同优先级;
3. 可以暂停、终止、复用渲染任务;
4. 并发;

React Fiber 的工作流程可以简单描述如下：

1. 构建 Fiber 树：首次渲染时，React 会根据组件树构建一个初始的 Fiber 树结构。

2. 任务调度：React Fiber 会根据任务的优先级和时间片（一小段时间）的概念，将渲染任务切分成多个小任务，并根据优先级调度任务的执行。

3. 协调更新：当组件状态发生变化时，React Fiber 会通过协调更新的方式，比较新旧 Fiber 树的差异，确定需要更新的组件。

4. 更新阶段：React Fiber 会根据差异的类型，执行不同的更新操作，比如插入、更新、删除等。

5. 提交阶段：当所有的更新操作完成后，React Fiber 会将更新结果同步到实际的 DOM 结构，完成渲染过程。

通过引入 React Fiber，React 可以更加灵活地处理组件的更新和渲染，提供更好的用户交互体验。它还为 React 的异步渲染和懒加载等特性提供了基础，使得 React 在性能和可维护性方面有了更大的提升。

!!! 重要内容!!!

React Fiber 的源码工作流程：
1、以CreateRoot().render为入口，调用UpdateContainer方法，UpdateContainer内会调用schduleUpdateOnFiber,schduleUpdateOnFiber用于记录当前更新中的fiber,专业名词叫做work in progress fiber;
然后requestIdeleCallback会调用方法workLoop, 在这个方法里：
1、创建完整的fiber树；
2、执行commit，即渲染；通常顺序是先提交自己——>child——>sibling;
3、再执行requestIdeleCallback(workLoop)，循环分片完成上面的两个任务，直到work in progress fiber为undefined,上面的两个任务终止；
4、更新阶段（如setState时），调用schduleUpdateOnFiber，更新当前的work in progress fiber，从而自动触发循环任务；

React架构图 任务调度

Vue 有没有引入Fiber任务调度机制？

在 Vue 中并没有引入类似于 React Fiber 的任务调度机制。

Vue 在其核心中使用了虚拟节点（VNode）的概念来描述组件的结构和状态。虚拟节点是一个轻量级的 JavaScript 对象，代表了真实 DOM 中的一个节点。Vue 使用虚拟节点来构建组件树，并在数据变化时通过对比新旧虚拟节点来进行高效的更新。

在 Vue 2.x 版本中，更新是通过递归地遍历组件树来完成的，没有引入类似于 React Fiber 的任务调度机制。而在 Vue 3.x 版本中，Vue 引入了基于 Proxy 的响应式系统和编译优化等新特性，以提升性能和开发体验，但并没有引入任务调度的概念。

因此，在 Vue 中，虚拟节点仍然是组件更新和渲染的核心概念，而任务调度机制并不是 Vue 的一部分。