catalogue

React reconciler entry

DIFF algorithm

Fiber tree and its related

Scheduling algorithm and others

summary

2021SC@SDUSC

React reconciler entry

In the first blog post, I briefly introduced the situation of reaction and its test run. Here, I explained that the component rendering in reaction mainly depends on render, and render calls legacyRenderSubtreeIntoContainer method, which calls updateContainer, and updateContainer imports updateContainer in reaction reconciler according to enableNewReconciler_ New or updateContainer_old (there are slight differences between the two, which will be introduced here and discussed later). So far, the react reconciler package is finally analyzed from render.

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';

This is the entrance to react reconciler. Reconciler means coordinator and moderator. Its main purpose is to coordinate the update, deletion and insertion of components.

From updateContainer to scheduleUpdateOnFiber to ensureroot isscheduled, a considerable part of the react ion pages are created and updated through this step.

DIFF algorithm

Through react reconciler, we will formally complete the update of react components. Here is a DIFF algorithm for quickly finding different nodes in the Fiber tree. Through the three strategies of the algorithm, the complexity of comparison and update nodes in the tree can be reduced from O(n^3) to O(n).

Fiber tree and its related

In addition, there are the double buffering of workInProgress tree and current tree, as well as the construction of new Fiber tree. In order to quickly adapt to the search and insertion of Fiber nodes, its data structure is relatively special, because rings appear in the Fiber tree in the coding process, but it is still conceptually called a tree, possibly because its child nodes and parent nodes point to each other, But the relationship between the two is not the same.

Scheduling algorithm and others

There is also a scheduling algorithm. Because there are priority tasks in the Fiber tree in the react itself, it is necessary to consider the division time of different priority tasks, detect whether the current task is completed, and complete the interruption of the current task when the high priority task is inserted. The scheduler built by react is used here, but we can find similar functions in windows, such as windows requestidlecallback, which is a function to be executed in the browser's idle time as a task chain. In addition, there are beginWork and completeUnitOfWork of the Fiber tree (the classification of different components must be considered in these two functions, and the update methods of Fiber nodes corresponding to each component are different), as well as the rendering planning of DOM nodes, such as update, insert, delete, etc., and the combination with HOOKS in function components. In addition, in the construction process of Fiber tree, During the construction of DOM tree in commit, the call of life cycle function in state component and the update of state will appear, which can further deepen the understanding of react application API and its execution time. Some of them will be emphasized.

summary

In general, it includes how to call react reconciler in react and the overall introduction and analysis of react reconciler, including DIFF algorithm, Fiber tree and scheduling mechanism, which will be introduced in detail in the future.