React Fiber
React Fiber 的作用和原理？
核心回答
React Fiber 是 React 16 及之后的底层渲染引擎重构，核心作用是解决老版本"同步不可中断渲染"导致的 UI 卡顿，为 React 18 并发渲染奠定基础，实现"可中断、可恢复、优先级驱动"的渲染。
核心原理
-
数据结构重构：用"链表结构"替代老版本的"递归栈"，每个组件对应一个 Fiber 节点，通过
child（第一个子节点）、sibling（下一个兄弟节点）、return（父节点）指针关联，支持中断后恢复。 -
两阶段渲染：①Reconciliation 阶段（可中断）：遍历 Fiber 树，对比新旧节点、标记副作用（如更新/删除 DOM）；②Commit 阶段（不可中断）：执行副作用（DOM 操作）、调用生命周期钩子。
-
双缓存机制：维护
current树（当前页面展示）和workInProgress树（正在构建），Commit 阶段完成后替换，确保 UI 状态一致。 -
优先级调度：按任务紧急程度分配优先级（如输入>动画>列表渲染>低优先级更新），高优先级任务可中断低优先级任务。
延伸问题-回答
- 延伸问题：Fiber 是如何实现"中断后恢复"的？
回答：核心是"链表结构+任务状态保存"——①链表结构：遍历不依赖递归栈，中断时只需保存当前 Fiber 节点指针；②状态保存：React 调度器记录任务进度（已处理节点、已标记副作用）；③恢复执行：高优先级任务完成后，从保存的节点继续遍历，无需重新遍历全树，实现"断点续传"。
- 延伸问题：Fiber 与虚拟 DOM 的关系是什么？
回答：Fiber 不是替代虚拟 DOM，而是"虚拟 DOM 的增强载体"——①虚拟 DOM 是"描述 UI 的数据结构"（如 type、props），核心作用是跨平台抽象+差异对比；②Fiber 节点包含虚拟 DOM 的所有信息，还增加了优先级、链表指针、副作用标记等调度属性；③总结：虚拟 DOM 定义"UI 是什么样"，Fiber 定义"如何高效渲染 UI"（调度+遍历+更新）。
- 延伸问题：React 18 的并发渲染和 Fiber 是什么关系？
回答：Fiber 是 React 18 并发渲染的"底层基础"，并发渲染是 Fiber 能力的"上层体现"——①Fiber 实现了"可中断渲染"和"优先级调度"，这是并发渲染的核心前提；②React 18 的 useTransition、自动批处理等并发特性，本质都是基于 Fiber 的这些能力实现的（如低优先级更新被高优先级任务中断）。
- 延伸问题：Reconciliation 阶段和 Commit 阶段为什么一个可中断，一个不可中断？
回答：关键看是否操作真实 DOM——①Reconciliation 阶段：仅做差异对比和副作用标记，不操作真实 DOM，中断恢复不会影响用户体验；②Commit 阶段：需执行 DOM 操作（插入/删除/更新节点）和生命周期钩子，若中断会导致 UI 处于"半成品状态"（部分节点更新、部分未更新），引发 UI 错乱，因此必须一次性执行完毕。
（注：文档部分内容可能由 AI 生成）