如何解释 React 的渲染流程

June 19, 2022

在梳理之前,先来了解渲染流程中一个概念---协调

协调(Reconciler)

React 官方文档在对于协调的解释

React 提供的声明式 API 让开发者可以在对 React 的底层实现没有具体了解的情况下编写应用。在开发者编写应用时虽然保持相对简单的心智,但开发者无法了解内部的实现机制。本文描述了在实现 React 的 “diffing” 算法中我们做出的设计决策以保证组件满足更新具有可预测性,以及在繁杂业务下依然保持应用的高性能性。

Reconciler是协助React确认状态变化时要更新哪些Dom元素的diff算法。

Reconciler模块以React 16为分界线分为两个版本:

  • Stack Reconciler是React 15及以前版本的渲染方案,其核心是以递归的方式逐级调度栈中子节点到父节点的渲染,无法中断
  • Fiber Reconciler是React 16以后版本的渲染方案,核心设计是增量渲染,将渲染工作分割为多个区块,并将其分散到多个帧中去执行。设计初衷是提高React在动画、画布及手势等场景下的性能表现。基于循环遍历diff

两者渲染的性能差距示例: https://claudiopro.github.io/react-fiber-vs-stack-demo/

渲染

Stack Reconciler

Stack Reconciler 没有单独的包,并没有像 Fiber Reconclier 一样抽取为独立的包


Profile picture

百事可乐

Let it snow, let it snow, let it snow