React Fiber

89 阅读1分钟

React 本质【快速响应】

快速响应的制约因素有哪些:

  • CPU瓶颈:当项目庞大,组件数量多,有很多大计算量的操作或设备性能不足,会导致卡顿
  • IO瓶颈:发送网络请求,由于等待数据返回才能进一步操作,导致不能快速响应,出现白屏

React 15 架构【Stack Reconciler】

  • Reconciler(协调器):负责找出变化的组件
  • Renderer(渲染器):负责将变化的组件渲染到页面上

Reconciler采用的是递归的方式创建虚拟DOM,【递归过程不能中断】。如果组件树的层级很深,递归会占用线程的时间长,交互就会出现卡顿.

React 16架构【Fiber Reconciler】

  • Scheduler(调度器):【调度任务的优先级】,高任务优先进入Reconciler
  • Reconciler(协调器):负责找出变化的组件【更新工作从递归变成可以中断的循环过程,Recondiler内部采用Fiber架构】
  • Renderer(渲染器):负责将变化的组件渲染到页面上

Fiber的实现过程

requestAnimationFrame

requestIdleCallback