[React] 6 - React16 Fiber 基于浏览器的单线程调度算法
2026-08-14 10:11:47
React Fiber 是 React 16 引入的一种基于浏览器单线程的调度算法，旨在解决 React 15 的性能问题，通过将递归遍历改为循环遍历的链表结构，实现任务的分片和可中断性，从而优化渲染流程。
背景与问题React 15 在组件加载或更新时，会同步执行生命周期调用、VNode 计算、diff 算法和 DOM 更新。这一过程是递归且不可中断的，导致主线程被长时间占用。例如，当渲染包含 200 个组件的树时，主线程会持续执行更新任务，期间无法响应高优先级事件（如用户输入），直到渲染完成才会处理其他操作，造成界面卡顿。
核心问题
单线程阻塞：JavaScript 是单线程的，长时间同步任务会阻塞主线程。
递归不可中断：React 15 的递归渲染无法在中间暂停，导致高优先级任务（如动画、输入）被延迟。
Fiber 的解决方案React 16 通过 Fiber 架构将递归遍历改为循环遍历的链表结构，实现以下优化：
任务分片：将大任务拆分为多个小任务（如将 100ms 的任务分成 10 个 10ms 的分片），每个分片执行后检查是否有更高优先级任务（如用户输入）。
可中断性：每个 Fiber 节点（任务单元）有独立的时间分片。若当前分片用完（如执行到 componentWillUpdate 时时间耗尽），React 会暂停当前任务，转而处理更高优先级任务（如事件响应），完成后恢复未完成的任务。
循环替代递归：通过链表结构（Fiber 节点）和循环遍历，避免递归栈过深的问题，使任务能随时中断和恢复。
实际表现
分片执行：主线程不再被单一任务长期占用，例如 100ms 的任务分成 10 个分片后，其他高优先级任务可以在每个分片间隙插入执行。
多次渲染：由于任务可能被中断并恢复，生命周期钩子（如 render）可能被多次调用，导致 console.log 输出多次。
与 React 15 的对比
React 15：递归渲染，同步执行，不可中断。
React 16+：基于 Fiber 的循环遍历，支持任务分片和优先级调度，提升响应性。
总结：React Fiber 通过链表结构和循环遍历，将同步渲染改为可中断的异步任务，解决了主线程阻塞问题，使 React 在单线程环境下也能高效处理高优先级交互，同时保持渲染逻辑的正确性。
热门标签
