Fiber、协调和并发渲染怎么理解?
先理解原理和示例,再练习完整口述与追问。
回答要点
Fiber 是 React 组织组件工作、状态及关联关系的内部结构;协调计算前后树差异,并发能力允许部分渲染工作被调度、中断和重做。不是所有阶段都可中断,也不意味着组件 JS 自动多线程执行。
原理拆解
Fiber 把组件工作组织为可遍历的节点单元,记录类型、关系、待处理更新和副作用等信息。调度器可以在 render 阶段选择优先级、让出执行机会、重试或丢弃工作;commit 仍需要把已确认变化一致地应用到宿主环境。并发渲染不是多个线程同时修改同一 DOM,而是调度可交错的计算过程。
示例与推演
用户正在输入时,低优先级的大结果区更新可以被中断,优先处理最新输入,再继续或重新计算结果。若组件函数里写入全局数组或发请求,放弃的 render 也已经造成副作用,重试又会重复,因此必须把这些行为放到明确的事件或提交后同步阶段。
易错点
不要说 Vue 因为有响应式就永远不需要调度,也不要说 Fiber 会让所有计算自动切成极小片。框架策略不同,最终仍要测量长任务和交互延迟。
参考回答可直接练习口述
Fiber 是 React 记录组件工作、状态、更新等信息的内部结构,协调过程计算哪些节点可复用及如何更新。并发渲染通过调度把部分 render 工作拆开,允许暂停、放弃和重做;commit 的关键 DOM 修改阶段仍有同步约束。它不是自动创建多个 JS 线程,也不能中断任意一段用户同步代码。
面试官可能继续问追问与完整解答展开收起
追问
为什么 render 必须纯净?key 与复用如何关联?优先级调度为何仍解决不了函数内超长的同步计算?
追问回答
render 如果有副作用,被重复或放弃时就可能产生错误,因此必须纯净。协调时会根据类型、位置和 key 判断复用。若组件里一次同步计算阻塞几百毫秒,React 无法在函数内部任意点抢占,仍要优化算法、分片或使用 Worker。