React 相关知识(2024)二
内容提要
React Fiber是React 16版本引入的新更新机制，通过链表数据结构切片渲染工作，实现中断和恢复。React Fiber的优势包括任务调度、优先级调度、协调算法优化和并发模式支持。React使用虚拟DOM Diff算法比较差异，提高性能。优化策略包括PureComponent、React.memo、shouldComponentUpdate和React Hooks。React的render方法将状态和属性转化为虚拟DOM，再转化为实际DOM操作。
延伸解读
Fiber 如何解决主线程阻塞
React 15 及之前版本采用递归遍历组件树，一旦开始渲染就必须一次性完成，期间无法响应交互，容易造成卡顿。Fiber 将渲染任务拆分为多个小单元，利用浏览器每帧的空闲时间分批执行，并允许高优先级任务中断低优先级任务。这样即使更新任务繁重，浏览器也能及时处理用户输入，提升交互流畅度。
Fiber 节点与双缓冲机制
Fiber 节点通过 child、sibling、return 三个指针形成链表结构，使得遍历可以中断并恢复。React 在内存中维护两棵 Fiber 树：当前显示的 current 树和正在构建的 workInProgress 树。构建完成后一次性提交到 DOM，避免渲染过程中出现不完整的界面。这种双缓冲设计保证了更新的原子性和用户体验的连贯性。
Reconciliation 与 Commit 的分工
Reconciliation 阶段负责比较新旧 Fiber 树，通过 beginWork 和 completeWork 计算差异并标记副作用，此阶段可中断。Commit 阶段则将计算出的所有变化同步应用到真实 DOM，并触发生命周期和副作用，此阶段不可中断。这种分工让耗时的协调工作可以灵活调度，而实际的 DOM 更新保持快速且完整。
Fiber 的局限与优化选择
Fiber 并未减少更新所需的总时间，而是通过时间切片让高优先级任务优先执行，因此动画更流畅、响应更快。但开发者仍需借助 PureComponent、React.memo、shouldComponentUpdate 和 Hooks 来避免不必要的渲染。与 Vue 基于数据劫持的细粒度更新不同，React 的 JSX 灵活性使其难以实现精准依赖收集，Fiber 是弥补这一不足的调度方案。
Q&A
React Fiber的主要优势是什么？
React Fiber的主要优势包括任务调度、优先级调度、协调算法优化和支持并发模式。
React Fiber是如何解决主线程阻塞问题的？
React Fiber通过将渲染任务拆分为多个小任务单元，并根据优先级灵活调度，从而避免主线程长时间阻塞。
什么是FiberNode，它在React中有什么作用？
FiberNode是React用于渲染和更新的核心数据结构，支持并发渲染和优先级调度。
React的diff算法是如何提高渲染性能的？
React的diff算法通过分层比较和优化策略，找出新旧虚拟DOM树的差异，从而减少不必要的DOM操作，提高渲染性能。
React Fiber如何实现可中断和恢复的渲染？
React Fiber通过引入链表数据结构，使得渲染过程可以在中断时保存当前状态，并在后续恢复。
React Fiber的双缓冲技术有什么好处？
双缓冲技术允许React同时维护当前显示树和正在构建的树，从而确保用户体验流畅，避免卡顿。
