react源码分析（2）-react-reconciler的整体介绍

目录

react-reconciler入口

DIFF算法

Fiber树及其相关

调度算法，渲染节点以及其他

总结

---

2021SC@SDUSC

react-reconciler入口

在第一篇博客中我大致介绍了一下react以及其测试运行的情况，在这里说明，react中的组件渲染主要依靠render，而render调用legacyRenderSubtreeIntoContainer方法，该方法调用updateContainer，而updateContainer根据enableNewReconciler来导入react-reconciler中的updateContainer_new或者updateContainer_old（两者差别细微，在这里先统一介绍，差别以后再说），至此，终于从render处分析到了react-reconciler包。  

import {
  createContainer as createContainer_new,
  updateContainer as updateContainer_new,
  batchedUpdates as batchedUpdates_new,
  deferredUpdates as deferredUpdates_new,
  discreteUpdates as discreteUpdates_new,
  flushControlled as flushControlled_new,
  flushSync as flushSync_new,
  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_new,
  flushPassiveEffects as flushPassiveEffects_new,
  getPublicRootInstance as getPublicRootInstance_new,
  attemptSynchronousHydration as attemptSynchronousHydration_new,
  attemptDiscreteHydration as attemptDiscreteHydration_new,
  attemptContinuousHydration as attemptContinuousHydration_new,
  attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_new,
  findHostInstance as findHostInstance_new,
  findHostInstanceWithWarning as findHostInstanceWithWarning_new,
  findHostInstanceWithNoPortals as findHostInstanceWithNoPortals_new,
  shouldError as shouldError_new,
  shouldSuspend as shouldSuspend_new,
  injectIntoDevTools as injectIntoDevTools_new,
  createPortal as createPortal_new,
  createComponentSelector as createComponentSelector_new,
  createHasPseudoClassSelector as createHasPseudoClassSelector_new,
  createRoleSelector as createRoleSelector_new,
  createTestNameSelector as createTestNameSelector_new,
  createTextSelector as createTextSelector_new,
  getFindAllNodesFailureDescription as getFindAllNodesFailureDescription_new,
  findAllNodes as findAllNodes_new,
  findBoundingRects as findBoundingRects_new,
  focusWithin as focusWithin_new,
  observeVisibleRects as observeVisibleRects_new,
  registerMutableSourceForHydration as registerMutableSourceForHydration_new,
  runWithPriority as runWithPriority_new,
  getCurrentUpdatePriority as getCurrentUpdatePriority_new,
  getIsStrictModeForDevtools as getIsStrictModeForDevtools_new,
  setIsStrictModeForDevtools as setIsStrictModeForDevtools_new,
} from './ReactFiberReconciler.new';

这就是react-reconciler的入口（以new系列方法为例），reconciler的含义就是协调器，调节人，主要目的就在于协调组件的更新，删除与插入等。

从 updateContainer 到scheduleUpdateOnFiber到ensureRootIsScheduled进入调度，相当一部分react页面创建以及更新就是通过这一步。接下来我将会简单介绍一下react-reconciler中的比较突出的部分，给大家留下整体的印象。

DIFF算法简介

通过react-reconciler，我们将正式完成react组件的更新，这里有迅速查找Fiber树中不同节点的DIFF算法，通过该算法的三大策略，完全可以将树中比对更新节点的复杂度从O(n^3)降到O(n)。这部分比较重要，以后会详细阐述其中的原理以及过程。

Fiber树及其相关

另外，还有workInProgress树与current树的双缓冲，以及新Fiber树的构建，为了快速适应Fiber节点的查找与插入，它的数据结构比较特殊，因为在编码过程中其实Fiber树中是出现了环的，但依旧在概念上称为树，可能是因为其子节点与父节点两者虽然互相指向，但两者关系并不相同。这是渲染节点的数据结构方面的基础。

调度算法，渲染节点以及其他

还有调度算法，因为本身react中在构建Fiber树中含有优先级任务，所以需要考虑对不同优先级任务的划分时间，并且检测当前任务是否完成，以及在高优先级任务插入时完成对当前任务的中断。这里的调度应用的是react自建的scheduler，但是我们可以在windows中找到类似的函数，比如WindowsrequestIdleCallback,将一个要在浏览器空闲时间执行的函数假如任务链。另外还有Fiber树的beginWork以及completeUnitOfWork（在这两个函数中必须考虑其对不同组件的分类，每种组件所对应的Fiber节点的更新方式并不相同）,还有DOM节点的渲染规划，比如更新，插入，删除等等，以及与函数组件中HOOKS的结合，另外，在Fiber树的构建过程，以及commit中的DOM树构建过程中，状态组件中生命周期函数的调用以及其中状态的更新这些都会出现，从而能够进一步加深对react应用API的了解以及其执行时机，有一部分更是会重点阐述。

总结

总体上包括了react中如何调用至react-reconciler以及对react-reconciler中的整体介绍与分析，其中包括DIFF算法，Fiber树以及调度机制等等，以后均会详细介绍。