React Learning Notes – Basic Concepts (4) Fiber node structure

The common paragraphs are explained as follows:

• Alternate: Current fiber pointing to work in progress fiber; Working in progress fiber points to current fiber

• StateNode: Saves references to class instances of components, DOM nodes, or other React element types associated with fiber nodes. In general, we can say that this property is used to hold the local state associated with the fiber.

• Type: defines the function or class associated with the fiber. For class components, it points to the constructor, and for DOM elements, it specifies the HTML tag. I often use this field to see what elements a fiber node is associated with.

• flags : Tasks are required in the current Fiber phase, including: placeholder, update, delete, etc. Fiber Tree and Effects List )

• Tag: defineTypes of optical fibers . It is used in the Reconciliation algorithm to determine what needs to be done. As mentioned earlier, the work depends on the type of React element. functioncreateFiberFromTypeAndPropsMap the React element to the corresponding fiber node type

• UpdateQueue: Queue for status updates, callbacks, and DOM updates. All updates generated by components in Fiber are placed in this queue

• MemoizedState: Current screen UI state, Fiber state last input update.

• PendingProps: New props brought about by a new change, called nextProps.

• MemoizedProps: Props for creating the output Fiber during the last render.

• Context Dependencies: A list of contexts, events that the Fiber depends on

• Key (React Element key) : A unique identifier with a set of children to help React find out which items have changed, been added, or been removed from the list. It’s related to the React “Lists and keys” feature described here.

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  // Static data store properties
  // Define the type of the optical fiber. It is used in the Reconciliation algorithm to determine what needs to be done. As mentioned earlier, the work depends on the type of React element. Function createFiberFromTypeAndProps will React element is mapped to the corresponding node type optical fiber
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  // Define the function or class associated with the fiber. For class components, it points to the constructor, and for DOM elements, it specifies the HTML tag. I often use this field to see what elements a fiber node is associated with.
  this.type = null;
  // Save references to class instances of components, DOM nodes, or other React element types associated with fiber nodes. In general, we can say that this property is used to hold the local state associated with the fiber.
  this.stateNode = null;

  // Fiber
  // The Fiber Tree structure is generated from the Fiber Tree
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;

  // Dynamic data & state related attributes
  // new props. NextProps is the new props brought about by the new change
  this.pendingProps = pendingProps;
  // prev props, props for creating the output Fiber during the last render
  this.memoizedProps = null;
  // The queue for status updates, callbacks, and DOM updates, as well as updates generated by components corresponding to Fiber, will be placed in this queue
  this.updateQueue = null;
  // The current screen UI corresponds to the state, the last input Fiber state
  this.memoizedState = null;
  // A list of contexts, events that this Fiber depends on
  this.dependencies = null;
  
  / / conCurrentMode and strictMode
  // The co-existence mode indicates whether the subtree is rendered asynchronously by default
  // When Fiber is created, it inherits from its parent Fiber
  this.mode = mode;

  // Effects
  // The current Fiber phase requires tasks, including: placeholding, updating, deleting, etc
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  // Priority scheduling related properties
  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  // Current tree is associated with working in PrGOress tree
  // In the process of updating the FIber tree, each FIber has its corresponding FIber
  Current <==> workInProgress
  // When the render is complete, it points to each other
  this.alternate = null;

  // The relative time recorded by the profiler
  if (enableProfilerTimer) {
    // Note: The following is done to avoid a v8 performance cliff.
    //
    // Initializing the fields below to smis and later updating them with
    // double values will cause Fibers to end up having separate shapes.
    // This behavior/bug has something to do with Object.preventExtension().
    // Fortunately this only impacts DEV builds.
    // Unfortunately it makes React unusably slow for some applications.
    // To work around this, initialize the fields below with doubles.
    //
    // Learn more about this here:
    // https://github.com/facebook/react/issues/14365
    // https://bugs.chromium.org/p/v8/issues/detail?id=8538
    this.actualDuration = Number.NaN;
    this.actualStartTime = Number.NaN;
    this.selfBaseDuration = Number.NaN;
    this.treeBaseDuration = Number.NaN;

    // It's okay to replace the initial doubles with smis after initialization.
    // This won't trigger the performance cliff mentioned above,
    // and it simplifies other profiler code (including DevTools).
    this.actualDuration = 0;
    this.actualStartTime = -1;
    this.selfBaseDuration = 0;
    this.treeBaseDuration = 0;
  }

  if (__DEV__) {
    // This isn't directly used but is handy for debugging internals:

    this._debugSource = null;
    this._debugOwner = null;
    this._debugNeedsRemount = false;
    this._debugHookTypes = null;
    if(! hasBadMapPolyfill &&typeof Object.preventExtensions === 'function') {
      Object.preventExtensions(this); }}}Copy the code