字数

694 字

阅读时间

3 分钟

fiber 是一种数据结构, 类似于树 是渲染机制的重新实现 将react渲染任务拆分成帧 每次渲染一帧后将任务权限交给react 如果一次渲染时间少于一帧, 在帧尾执行其他任务 实现了 中断 机制 和 动态优先级

你的理解大体上是正确的，但我可以提供一些补充和澄清：

1. 数据结构类似于树： Fiber 是一种特殊的数据结构，确实可以理解为树结构，因为它代表了 React 组件树中的每个组件。每个组件都有一个对应的 Fiber 节点，节点之间的关系形成了一个树形结构。Fiber 结构的关键之处在于，它为每个组件的更新提供了细粒度的控制，允许在不同时间执行不同的任务。

2. 渲染机制的重新实现： Fiber 是 React 16 引入的一个核心架构，它重构了 React 的渲染机制。传统的 React 渲染模型是同步的，会一次性完成整个组件树的更新，而 Fiber 则将渲染任务拆分成多个小任务，使得渲染过程可以被中断和恢复。

3. 任务拆分成帧： 你提到的“将任务拆分成帧”是指 Fiber 将渲染工作分成较小的单元，每一部分可以在一个帧（frame）内执行。React 使用浏览器的 requestIdleCallback 或 requestAnimationFrame 来管理这些渲染任务。通过分段执行，React 可以在更新过程中暂停，处理其他优先级更高的任务，如用户输入事件。

4. 中断机制和动态优先级： 这部分理解得很准确。Fiber 的一个关键特性就是中断机制和动态优先级。渲染任务可以根据其优先级被打断和重新调度，这样可以保证高优先级的任务（例如用户交互）优先被处理，而不需要等待整个渲染过程完成。

5. 帧尾执行其他任务： 如果一次渲染任务的时间少于一帧，React 确实会利用剩余的时间来执行其他低优先级的任务。这有助于最大化浏览器的资源利用，同时避免卡顿。

总结来说，你的理解是正确的，但可以再加强对 Fiber 数据结构的细节理解，例如它如何通过双缓存（双链表）来追踪更新和回调。 watch computed

贡献者

sunchengzhi

文件历史

最后编辑于 大约 2 个月前查看完整历史

de5fa-fix:修改文件名