React17源码解析：揭开Fiber的神秘面纱

为什么需要 Fiber？

在 React16 之前，React 使用的是名为「栈（Stack）」的协调器来管理更新。Stack 是一种单线程的协调器，这意味着它一次只能处理一个更新。当一个组件更新时，Stack 会将该组件及其子组件标记为需要更新，然后一次一个地处理这些更新。

这种方法存在一些问题：

• 性能问题：当组件树很大时，Stack 会变得非常慢。这是因为 Stack 需要遍历整个组件树，并为每个组件计算新的状态。
• 内存问题：Stack 还会导致内存问题。这是因为 Stack 需要在内存中存储整个组件树的状态。
• 无法中断更新：Stack 无法中断更新。这意味着如果用户在更新过程中单击了某个按钮，则该更新将继续进行，直到完成。

为了解决这些问题，React 团队开发了 Fiber。Fiber 是一种新的协调器，它使用了一种称为「异步渲染」的技术。异步渲染允许 Fiber 在一次渲染过程中中断更新，并稍后继续。这使得 Fiber 能够比 Stack 更快、更有效地处理更新。

Fiber 节点结构中的属性

Fiber 节点是 Fiber 树的基本单元。每个 Fiber 节点都包含以下属性：

• type：组件的类型。例如，一个 <div> 组件的 type 就是 "div"。
• props：组件的属性。例如，一个 <div> 组件的 props 可能包括 "className" 和 "id"。
• children：组件的子组件。例如，一个 <div> 组件的 children 可能包括一个 <p> 组件和一个 <span> 组件。
• stateNode：组件的实例。例如，一个 <div> 组件的 stateNode 就是一个 HTML <div> 元素。
• fiberFlags：Fiber 节点的标记。这些标记用于指示 Fiber 节点的状态。例如，一个 Fiber 节点可能被标记为 "需要更新" 或 "需要删除"。
• child：指向第一个子 Fiber 节点的指针。
• sibling：指向下一个兄弟 Fiber 节点的指针。
• return：指向父 Fiber 节点的指针。

Fiber 树是如何构建与更新的？

Fiber 树是 React 组件树的表示。Fiber 树是通过以下步骤构建的：

1. React 创建一个根 Fiber 节点。该 Fiber 节点对应于组件树的根组件。
2. React 遍历根 Fiber 节点，并为其创建子 Fiber 节点。
3. React 继续遍历子 Fiber 节点，并为其创建子 Fiber 节点，直到所有组件都已创建。

Fiber 树的更新过程如下：

1. React 将需要更新的组件标记为 "需要更新"。
2. React 遍历需要更新的组件，并为其创建新的 Fiber 节点。
3. React 将新的 Fiber 节点与旧的 Fiber 节点进行比较，并找出需要更新的属性。
4. React 将需要更新的属性应用到旧的 Fiber 节点上。

通过这种方式，React 可以有效地更新组件树，而不会影响其他组件。

总结

Fiber 是 React17 中引入的新协调器。Fiber 使用了一种称为「异步渲染」的技术，这使得它能够比 Stack 更快、更有效地处理更新。Fiber 树是 React 组件树的表示。Fiber 树是通过遍历组件树并为每个组件创建 Fiber 节点来构建的。Fiber 树的更新过程如下：将需要更新的组件标记为 "需要更新"，为其创建新的 Fiber 节点，将新的 Fiber 节点与旧的 Fiber 节点进行比较，并找出需要更新的属性，最后将需要更新的属性应用到旧的 Fiber 节点上。