【前端】什么是 react fiber
2026-10-30 18:27:19
React Fiber 是 React 的一种新的协调（reconciliation）引擎，旨在解决 React 在处理大型应用时可能出现的性能瓶颈，特别是在更新过程中可能导致的界面卡顿问题。
一、Fiber 的背景与目的在 React 15 及更早版本中，协调过程是由一个称为“Stack Reconciler”的递归算法实现的。这个算法在执行 DOM Diff 时，不允许被外界打断，这意味着一旦开始执行，就会一直占用主线程，直到完成。对于大型应用或复杂的 UI 更新，这可能会导致界面卡顿，因为浏览器在这段时间内无法进行重排和重绘。
Fiber 的提出正是为了解决这一问题。它允许将协调过程拆分成多个小任务，这些任务可以在不同的时间片（time slice）内执行，从而允许浏览器在任务之间插入重排和重绘操作，避免界面卡顿。
二、Fiber 的原理Fiber 的核心思想是将协调过程变成可中断的。它通过将虚拟 DOM 树转换成一种称为“Fiber”的数据结构链表来实现这一点。每个 Fiber 节点代表虚拟 DOM 树中的一个元素或组件，并包含指向其子节点、兄弟节点和父节点的指针。
在协调过程中，React 会按照深度优先搜索（DFS）的顺序遍历 Fiber 链表。如果一个 Fiber 节点有子节点，那么会先访问子节点；如果没有子节点，则找兄弟节点；如果都没有，则返回父节点。这个过程会一直持续到遍历完整个链表。
然而，与 Stack Reconciler 不同的是，Fiber 允许在遍历过程中插入时间片检查。如果在执行某个任务之前检查到已经超出了预先设定好的时间片，那么 React 会停止当前任务，将剩下的节点放到一个队列中，并使用 setTimeout 或 requestIdleCallback 等方法将任务安排到下一个事件循环中执行。这样，浏览器就可以在任务之间插入重排和重绘操作，从而避免界面卡顿。
三、Fiber 的具体实现Fiber 的实现涉及多个方面，包括 Fiber 节点的数据结构、协调算法的实现以及时间片的管理等。
Fiber 节点的数据结构：Fiber 节点是一个对象，包含以下属性：
stateNode：节点实例，对于类组件来说是类的实例，对于函数组件来说是返回的元素。
child：指向子节点的指针。
sibling：指向兄弟节点的指针。
return：指向父节点的指针。
协调算法的实现：协调算法按照深度优先搜索的顺序遍历 Fiber 链表。在遍历过程中，React 会根据新旧 Fiber 节点之间的差异来更新 DOM。如果节点类型相同，则比较属性和子节点；如果节点类型不同，则替换整个节点。
时间片的管理：React 使用一个全局变量来跟踪剩余的时间片。在开始执行协调任务之前，React 会检查剩余时间片是否足够。如果不够，则停止当前任务，将剩下的节点放到队列中，并安排下一个事件循环中执行。这个过程会一直重复，直到遍历完整个 Fiber 链表。
React Fiber 是 React 的一种新的协调引擎，它通过将协调过程拆分成多个可中断的小任务来解决大型应用可能出现的性能瓶颈问题。Fiber 的实现涉及将虚拟 DOM 树转换成 Fiber 数据结构链表、实现深度优先搜索的协调算法以及管理时间片等多个方面。通过引入 Fiber，React 能够更好地利用浏览器的空闲时间进行 UI 更新，从而避免界面卡顿现象的发生。
以上图片展示了 Fiber 引入前后浏览器用于渲染的 CPU 执行时间对比以及 Fiber 原理的示意图，有助于更好地理解 Fiber 的工作原理和优势。
热门标签
