React-fiber 如何优化性能

83 阅读1分钟
  1. 更新的两个阶段
reconciliation阶段-执行diff 算法,纯 JS 计算

commit 阶段 -将diff结果渲染DOM
  1. 可能会有性能问题
JS 是单线程,且和DOM渲染共用一个线程

当组件足够复杂,组件更新时计算和渲染都压力大

同时再有 DOM 操作需求(动画,鼠标拖拽等),将卡顿

解决方案 fiber

将reconciliation阶段进行任务拆分(commit无法拆分)

DOM需要渲染时暂停,空闲时恢复

使用API window.requestIdleCallback