淺談ReactFiber

yibinnn 發(fā)布于2019-08-23 16:46 / 2054人閱讀

摘要：什么是每一個(gè)都有一個(gè)對(duì)應(yīng)的，記錄這個(gè)節(jié)點(diǎn)的各種狀態(tài)，是一鏈表的結(jié)構(gòu)的串聯(lián)起來(lái)。

1. 什么是fiber

每一個(gè)ReactElement都有一個(gè)對(duì)應(yīng)的fiber，記錄這個(gè)節(jié)點(diǎn)的各種狀態(tài)， fiber是一鏈表的結(jié)構(gòu)的串聯(lián)起來(lái)。

2. Fiber的組成

export type Fiber = {|
 
          // Tag identifying the type of fiber.
        //區(qū)分fiber的種類
  tag: WorkTag,

          // Unique identifier of this child.
        // 像react元素中的唯一的key
  key: null | string,

          // The value of element.type which is used to preserve the identity during
          // reconciliation of this child.
            //就是creatElement的第一個(gè)值，用來(lái)在子節(jié)點(diǎn)reconciliation階段的標(biāo)識(shí)
  elementType: any,

          // The resolved function/class/ associated with this fiber.
        //異步組件加載resovled后種類是函數(shù)式還是類
  type: any,

          // The local state associated with this fiber.
        //與這個(gè)fiber聯(lián)系的本地狀態(tài)，指向?qū)嵗?  stateNode: any,

          // It is conceptually the same as the return address of a stack frame.
         // 指向 Fiber Tree 中的父節(jié)點(diǎn)
  return: Fiber | null,

          // Singly Linked List Tree Structure.
         // 指向第一個(gè)子節(jié)點(diǎn)
  child: Fiber | null,
        // 指向兄弟節(jié)點(diǎn)
  sibling: Fiber | null,
  index: number,

  // The ref last used to attach this node.
  // I"ll avoid adding an owner field for prod and model that as functions.
  ref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject,

          // Input is the data coming into process this fiber. Arguments. Props.
          //新的即將進(jìn)來(lái)的props
  pendingProps: any, // This type will be more specific once we overload the tag.
            // 現(xiàn)在的已經(jīng)展示在UI上的props
  memoizedProps: any, // The props used to create the output.
        
          // A queue of state updates and callbacks.
        // 保存更新的狀態(tài)和回調(diào)函數(shù)
  updateQueue: UpdateQueue | null,

      // The state used to create the output
      // 展示在UI中的state
  memoizedState: any,

  // A linked-list of contexts that this fiber depends on
  contextDependencies: ContextDependencyList | null,

  mode: TypeOfMode,

      // Effect
    //副作用
  effectTag: SideEffectTag,

          // Singly linked list fast path to the next fiber with side-effects.
        // 單鏈表結(jié)構(gòu)，方便遍歷 Fiber Tree 上有副作用的節(jié)點(diǎn)
  nextEffect: Fiber | null,

  // The first and last fiber with side-effect within this subtree. This allows
  // us to reuse a slice of the linked list when we reuse the work done within
  // this fiber.
    //在子節(jié)點(diǎn)中的第一個(gè)和最后一個(gè)的副作用，這個(gè)可以允許我們進(jìn)行切片的復(fù)用
  firstEffect: Fiber | null,
  lastEffect: Fiber | null,

  // Represents a time in the future by which this work should be completed.
  // Does not include work found in its subtree.
  expirationTime: ExpirationTime,

  // This is used to quickly determine if a subtree has no pending changes.
  childExpirationTime: ExpirationTime,

  // This is a pooled version of a Fiber. Every fiber that gets updated will
  // eventually have a pair. There are cases when we can clean up pairs to save
  // memory if we need to.
  alternate: Fiber | null,

  // Time spent rendering this Fiber and its descendants for the current update.
  // This tells us how well the tree makes use of sCU for memoization.
  // It is reset to 0 each time we render and only updated when we don"t bailout.
  // This field is only set when the enableProfilerTimer flag is enabled.
  actualDuration?: number,

  // If the Fiber is currently active in the "render" phase,
  // This marks the time at which the work began.
  // This field is only set when the enableProfilerTimer flag is enabled.
  actualStartTime?: number,

  // Duration of the most recent render time for this Fiber.
  // This value is not updated when we bailout for memoization purposes.
  // This field is only set when the enableProfilerTimer flag is enabled.
  selfBaseDuration?: number,

  // Sum of base times for all descedents of this Fiber.
  // This value bubbles up during the "complete" phase.
  // This field is only set when the enableProfilerTimer flag is enabled.
  treeBaseDuration?: number,

  // Conceptual aliases
  // workInProgress : Fiber ->  alternate The alternate used for reuse happens
  // to be the same as work in progress.
  // __DEV__ only
  _debugID?: number,
  _debugSource?: Source | null,
  _debugOwner?: Fiber | null,
  _debugIsCurrentlyTiming?: boolean,

  // Used to verify that the order of hooks does not change between renders.
  _debugHookTypes?: Array | null,
|};