【React】如何理解 React 的 Fiber？

理解 React 源码的 Fiber 需要对 React 的内部工作原理和性能优化有深入的了解。Fiber 是 React 16 及以后版本中引入的一种新的内部表示形式，用于在 React 的核心算法中更好地管理组件树的更新和渲染。以下是关于 React 源码中 Fiber 的理解：

1. 为什么需要 Fiber？

• 在 React 15 及之前，React 使用了一种称为“堆栈调和递归”的算法来更新组件树。这种算法在大型应用或高频更新时可能导致性能问题，因为它在渲染过程中会阻塞浏览器的主线程。
• 为了解决这些问题，React 团队引入了 Fiber 架构，它允许 React 将渲染工作拆分成多个小任务，并在主线程空闲时执行这些任务，从而实现增量渲染和可中断的渲染过程。

2. Fiber 的核心概念

• FiberNode（Fiber）：Fiber 是 React 内部用于表示组件树节点的数据结构。每个 Fiber 节点包含组件的类型、props、state 等信息，以及与其他 Fiber 节点的关系（如子节点、兄弟节点、父节点等）。
• Fiber Tree（Fiber 树）：Fiber 树是 React 内部维护的一个与组件树相对应的树形结构。每个组件实例在 Fiber 树中都有一个对应的 Fiber 节点。
• WorkInProgress Tree（进行中工作树）<