每個ReactElement都有一個對應的fiber, 記錄這個節點的各類狀態, fiber是一鏈表的結構的串聯起來。javascript
export type Fiber = {| // Tag identifying the type of fiber. //區分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的第一個值,用來在子節點reconciliation階段的標識 elementType: any, // The resolved function/class/ associated with this fiber. //異步組件加載resovled後種類是函數式仍是類 type: any, // The local state associated with this fiber. //與這個fiber聯繫的本地狀態,指向實例 stateNode: any, // It is conceptually the same as the return address of a stack frame. // 指向 Fiber Tree 中的父節點 return: Fiber | null, // Singly Linked List Tree Structure. // 指向第一個子節點 child: Fiber | null, // 指向兄弟節點 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. //新的即將進來的props pendingProps: any, // This type will be more specific once we overload the tag. // 如今的已經展現在UI上的props memoizedProps: any, // The props used to create the output. // A queue of state updates and callbacks. // 保存更新的狀態和回調函數 updateQueue: UpdateQueue<any> | 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. // 單鏈表結構,方便遍歷 Fiber Tree 上有反作用的節點 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. //在子節點中的第一個和最後一個的反作用,這個能夠容許咱們進行切片的複用 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<HookType> | null, |};