简介

React Fiber是React 16中的新reconciliation引擎。它的主要目标是启用虚拟DOM的增量渲染

React Fiber是对React核心算法的不断重新实现。这是React团队经过两年多研究的结晶。

React Fiber的目标是提高其对动画,布局和手势等区域的适用性。它的核心功能是增量渲染:将渲染work分成多个块并将其分布到多个frames中的能力。

其他关键功能包括随着新updates的出现而暂停,中止或重用work的功能; 为不同类型的updates分配优先级的能力; 和新的并发primitives。

Stack reconciliation — updates必须在返回主线程之前完全完成

Stack reconciliation — updates必须在返回主线程之前完全完成

Fiber reconciliation — 更新将分批处理,React将管理主线程

Fiber reconciliation — updates将分批处理,React将管理主线程

什么是reconciliation?

reconciliation:React使用该算法将一棵树与另一棵树进行比较,以确定哪些部分需要更改。

update:用于渲染React应用程序的数据中的更改。通常是setState的结果。最终导致重新渲染。

Reconciliation 与 rendering

DOM只是React可以渲染的渲染环境之一,其他主要目标是通过React Native提供的native iOS和Android视图。 (这就是为什么“virtual DOM”有点用词不当的原因。)

它可以支持这么多目标的原因是因为React被设计为协调和渲染是独立的阶段。 reconciler负责计算树的哪些部分已更改; 然后,renderer使用该信息来实际更新渲染的应用程序。

这种分离意味着React DOM和React Native可以使用自己的renderers,同时共享由React core提供的相同reconciler。

Fiber重新实现了reconciler。 尽管renderer将需要更改以支持(并利用)新体系结构,但它基本上与渲染无关。

Scheduling

scheduling:确定何时应执行work的过程。

work:必须执行的任何计算。 Work通常是更新的结果(例如setState)。

Fiber是什么?

我们已经确定,Fiber的主要目标是使React能够利用scheduling的优势。 具体来说,我们需要能够

  • 暂停work,稍后再回来。
  • 为不同类型的work分配优先级。
  • 重用以前完成的work。
  • 如果不再需要,则中止work。

为了做到这一点,我们首先需要一种将工作分解成多个units的方法。 从某种意义上说,这就是Fiber。 Fiber代表unit of work。

React Fiber Architecture