packages/react-reconciler/src/ReactFiber.js

Fiber

// A Fiber is work on a Component that needs to be done or was done. There can // be more than one per component. // Fiber 是 Component 上需要完成或已經完成工作。每個組件可以有多個 fiber。 export type Fiber = {|// These first fields are conceptually members of an Instance. This used to// be split into a separate type and intersected with the other Fiber fields,// but until Flow fixes its intersection bugs, we've merged them into a// single type.// 這些字段在概念上是實例的成員。// 這曾經被分割成一個單獨的類型，并與其他 fiber 字段相交，// 但是直到 Flow 修復了它的交集錯誤，我們才將它們合并成一個單一的類型。// An Instance is shared between all versions of a component. We can easily// break this out into a separate object to avoid copying so much to the// alternate versions of the tree. We put this on a single object for now to// minimize the number of objects created during the initial render.// 在一個組件的所有版本之間共享的實例。// 我們可以很容易地將其拆分為一個單獨的對象，// 以避免過多地復制到樹的其他版本。// 現在我們將它放在一個對象上，以最小化在初始渲染期間創建的對象的數量。// 標記 fiber 類型的標簽。tag: WorkTag,// 此子元素的唯一標識符。key: null | string,// The value of element.type which is used to preserve the identity during// reconciliation of this child.// element.type 的值，用于在此子元素的協調（reconciliation）過程中保存標識。elementType: any,// The resolved function/class/ associated with this fiber.//與此 fiber 相關聯的已解析的 function/class/。type: any,// The local state associated with this fiber.// 與此 fiber 相關聯的本地狀態。stateNode: any,// Conceptual aliases// parent : Instance -> return The parent happens to be the same as the// return fiber since we've merged the fiber and instance.// 概念的別名// parent：Instance -> return// parent 恰好與 return 的 fiber 相同，因為我們已經合并了 fiber 和實例。// Remaining fields belong to Fiber// 剩余的字段屬于 Fiber// The Fiber to return to after finishing processing this one.// This is effectively the parent, but there can be multiple parents (two)// so this is only the parent of the thing we're currently processing.// It is conceptually the same as the return address of a stack frame.// 這條 Fiber 處理完后完后要返回。// 這實際上是 parent，但是可以有多個 parent (兩個)，所以這只是我們當前正在處理的東西的父類 fiber。// 在概念上與堆棧幀的返回地址相同。return: Fiber | null,// Singly Linked List Tree Structure.// 單鏈表樹結構。child: Fiber | null,sibling: Fiber | null,index: number,// The ref last used to attach this node.// 最后用于附加此節點的 ref。// 我將避免為 prod 和 model 添加一個 owner 字段作為函數。// 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.// 輸入是處理該 fiber 的數據。Arguments. Props.pendingProps: any, // This type will be more specific once we overload the tag.一旦我們重載了標簽，這種類型將會更加具體。memoizedProps: any, // The props used to create the output.用于創建輸出的 props。// A queue of state updates and callbacks.// 狀態更新和回調的隊列。updateQueue: UpdateQueue<any> | null,// The state used to create the output// 用于創建輸出的狀態memoizedState: any,// A linked-list of contexts that this fiber depends on// 此 fiber 所依賴的上下文的鏈表contextDependencies: ContextDependencyList | null,// Bitfield that describes properties about the fiber and its subtree. E.g.// the ConcurrentMode flag indicates whether the subtree should be async-by-// default. When a fiber is created, it inherits the mode of its// parent. Additional flags can be set at creation time, but after that the// value should remain unchanged throughout the fiber's lifetime, particularly// before its child fibers are created.// 位字段，描述 fiber 及其子樹的屬性。// 例如，ConcurrentMode 標志指示子樹是否默認為 async。// 當創建一個 fiber 時，它繼承其父的 mode 。// 可以在創建時設置附加標志，但在此之后，值應該在整個 fiber 的生命周期內保持不變，特別是在創建子 fiber 之前。mode: TypeOfMode,// EffecteffectTag: SideEffectTag,// Singly linked list fast path to the next fiber with side-effects.// 單鏈表快速路徑到下一個具有副作用的 fiber。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.// 這個子樹中的第一個和最后一個有副作用的 fiber。// 這允許我們在重用在這個 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.// 這是 fiber 的混合版本。// 每一個被更新的 fiber 最終都會有一對。// 在某些情況下，如果需要，我們可以清理它以節省內存。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.// 為當前更新進行渲染此 fiber 及其后代所花費的時間。// 這告訴我們這棵樹如何很好地利用 sCU 進行記憶。// 每次渲染時它都被重置為 0，只有在不進行緊急救援（bailout）時才會更新。// 只有在啟用 enableProfilerTimer 標志時才設置此字段。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.// 如果 fiber 目前處于“渲染”階段，// 這標志著這項工作（work）開始的時間。// 只有在啟用 enableProfilerTimer 標志時才設置此字段。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.// 此 fiber 最近渲染的持續時間。// 當我們出于記憶目的進行緊急救助(bailout)時，此值不會更新。// 只有在啟用 enableProfilerTimer 標志時才設置此字段。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.// 這個 fiber 的所有 descedents 的基時間之和。// 這個值在“完成”階段出現。// 只有在啟用 enableProfilerTimer 標志時才設置此字段。treeBaseDuration?: number,// Conceptual 的別名// workInProgress : Fiber -> alternate// 用于重用的替代方法恰好與正在進行的 work 相同。// 對于復用的替代方法恰好與正在進行的 work 相同。// 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, |}; 復制代碼

FiberNode

function FiberNode(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode, ) {// Instancethis.tag = tag;this.key = key;this.elementType = null;this.type = null;this.stateNode = null;// Fiberthis.return = null;this.child = null;this.sibling = null;this.index = 0;this.ref = null;this.pendingProps = pendingProps;this.memoizedProps = null;this.updateQueue = null;this.memoizedState = null;this.contextDependencies = null;this.mode = mode;// Effectsthis.effectTag = NoEffect;this.nextEffect = null;this.firstEffect = null;this.lastEffect = null;this.expirationTime = NoWork;this.childExpirationTime = NoWork;this.alternate = null;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=8538this.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__) {// do something} } 復制代碼

createFiber

// This is a constructor function, rather than a POJO constructor, still // please ensure we do the following: // 1) Nobody should add any instance methods on this. Instance methods can be // more difficult to predict when they get optimized and they are almost // never inlined properly in static compilers. // 2) Nobody should rely on `instanceof Fiber` for type testing. We should // always know when it is a fiber. // 3) We might want to experiment with using numeric keys since they are easier // to optimize in a non-JIT environment. // 4) We can easily go from a constructor to a createFiber object literal if that // is faster. // 5) It should be easy to port this to a C struct and keep a C implementation // compatible. const createFiber = function(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode, ): Fiber {// $FlowFixMe: the shapes are exact here but Flow doesn't like constructorsreturn new FiberNode(tag, pendingProps, key, mode); }; 復制代碼

createWorkInProgress

// This is used to create an alternate fiber to do work on. // 用于創建進行工作的備用 fiber。 export function createWorkInProgress(current: Fiber,pendingProps: any,expirationTime: ExpirationTime, ): Fiber {let workInProgress = current.alternate;if (workInProgress === null) {// We use a double buffering pooling technique because we know that we'll// only ever need at most two versions of a tree. We pool the "other" unused// node that we're free to reuse. This is lazily created to avoid allocating// extra objects for things that are never updated. It also allow us to// reclaim the extra memory if needed.workInProgress = createFiber(current.tag,pendingProps,current.key,current.mode,);workInProgress.elementType = current.elementType;workInProgress.type = current.type;workInProgress.stateNode = current.stateNode;if (__DEV__) {// DEV-only fieldsworkInProgress._debugID = current._debugID;workInProgress._debugSource = current._debugSource;workInProgress._debugOwner = current._debugOwner;workInProgress._debugHookTypes = current._debugHookTypes;}workInProgress.alternate = current;current.alternate = workInProgress;} else {workInProgress.pendingProps = pendingProps;// 我們已經有一個 alternate.// 重置效果標簽。workInProgress.effectTag = NoEffect;// The effect list is no longer valid.// 效果列表不再有效。workInProgress.nextEffect = null;workInProgress.firstEffect = null;workInProgress.lastEffect = null;if (enableProfilerTimer) {// We intentionally reset, rather than copy, actualDuration & actualStartTime.// This prevents time from endlessly accumulating in new commits.// This has the downside of resetting values for different priority renders,// But works for yielding (the common case) and should support resuming.workInProgress.actualDuration = 0;workInProgress.actualStartTime = -1;}}workInProgress.childExpirationTime = current.childExpirationTime;workInProgress.expirationTime = current.expirationTime;workInProgress.child = current.child;workInProgress.memoizedProps = current.memoizedProps;workInProgress.memoizedState = current.memoizedState;workInProgress.updateQueue = current.updateQueue;workInProgress.contextDependencies = current.contextDependencies;// These will be overridden during the parent's reconciliationworkInProgress.sibling = current.sibling;workInProgress.index = current.index;workInProgress.ref = current.ref;if (enableProfilerTimer) {workInProgress.selfBaseDuration = current.selfBaseDuration;workInProgress.treeBaseDuration = current.treeBaseDuration;}return workInProgress; } 復制代碼

createHostRootFiber

export function createHostRootFiber(isConcurrent: boolean): Fiber {let mode = isConcurrent ? ConcurrentMode | StrictMode : NoContext;if (enableProfilerTimer && isDevToolsPresent) {// Always collect profile timings when DevTools are present.// This enables DevTools to start capturing timing at any point–// Without some nodes in the tree having empty base times.mode |= ProfileMode;}return createFiber(HostRoot, null, null, mode); } 復制代碼

createFiberFromTypeAndProps

/*** 根據 type 和 props 創建 fiber* @param type* @param key* @param pendingProps* @param owner* @param mode* @param expirationTime* @returns {Fiber|*}*/ export function createFiberFromTypeAndProps(type: any, // React$ElementTypekey: null | string,pendingProps: any,owner: null | Fiber,mode: TypeOfMode,expirationTime: ExpirationTime, ): Fiber {let fiber;let fiberTag = IndeterminateComponent;// The resolved type is set if we know what the final type will be. I.e. it's not lazy.let resolvedType = type;if (typeof type === 'function') {if (shouldConstruct(type)) {fiberTag = ClassComponent;}} else if (typeof type === 'string') {fiberTag = HostComponent;} else {getTag: switch (type) {case REACT_FRAGMENT_TYPE:return createFiberFromFragment(pendingProps.children,mode,expirationTime,key,);case REACT_CONCURRENT_MODE_TYPE:return createFiberFromMode(pendingProps,mode | ConcurrentMode | StrictMode,expirationTime,key,);case REACT_STRICT_MODE_TYPE:return createFiberFromMode(pendingProps,mode | StrictMode,expirationTime,key,);case REACT_PROFILER_TYPE:return createFiberFromProfiler(pendingProps, mode, expirationTime, key);case REACT_SUSPENSE_TYPE:return createFiberFromSuspense(pendingProps, mode, expirationTime, key);default: {if (typeof type === 'object' && type !== null) {switch (type.$$typeof) {case REACT_PROVIDER_TYPE:fiberTag = ContextProvider;break getTag;case REACT_CONTEXT_TYPE:// This is a consumerfiberTag = ContextConsumer;break getTag;case REACT_FORWARD_REF_TYPE:fiberTag = ForwardRef;break getTag;case REACT_MEMO_TYPE:fiberTag = MemoComponent;break getTag;case REACT_LAZY_TYPE:fiberTag = LazyComponent;resolvedType = null;break getTag;}}let info = '';if (__DEV__) {if (type === undefined ||(typeof type === 'object' &&type !== null &&Object.keys(type).length === 0)) {info +=' You likely forgot to export your component from the file ' +"it's defined in, or you might have mixed up default and " +'named imports.';}const ownerName = owner ? getComponentName(owner.type) : null;if (ownerName) {info += '\n\nCheck the render method of `' + ownerName + '`.';}}invariant(false,'Element type is invalid: expected a string (for built-in ' +'components) or a class/function (for composite components) ' +'but got: %s.%s',type == null ? type : typeof type,info,);}}}fiber = createFiber(fiberTag, pendingProps, key, mode);fiber.elementType = type;fiber.type = resolvedType;fiber.expirationTime = expirationTime;return fiber; } 復制代碼

createFiberFromElement

/*** 根據 element 創建 fiber* @param element* @param mode* @param expirationTime* @returns {Fiber}*/ export function createFiberFromElement(element: ReactElement,mode: TypeOfMode,expirationTime: ExpirationTime, ): Fiber {let owner = null;if (__DEV__) {owner = element._owner;}const type = element.type;const key = element.key;const pendingProps = element.props;const fiber = createFiberFromTypeAndProps(type,key,pendingProps,owner,mode,expirationTime,);if (__DEV__) {fiber._debugSource = element._source;fiber._debugOwner = element._owner;}return fiber; } 復制代碼

createFiberFromFragment

/*** 根據 Fragment 創建 Fiber* @param elements* @param mode* @param expirationTime* @param key* @returns {Fiber}*/ export function createFiberFromFragment(elements: ReactFragment,mode: TypeOfMode,expirationTime: ExpirationTime,key: null | string, ): Fiber {const fiber = createFiber(Fragment, elements, key, mode);fiber.expirationTime = expirationTime;return fiber; } 復制代碼

createFiberFromProfiler

/*** 根據 Profiler 創建 Fiber* @param pendingProps* @param mode* @param expirationTime* @param key* @returns {Fiber}*/ function createFiberFromProfiler(pendingProps: any,mode: TypeOfMode,expirationTime: ExpirationTime,key: null | string, ): Fiber {if (__DEV__) {if (typeof pendingProps.id !== 'string' ||typeof pendingProps.onRender !== 'function') {warningWithoutStack(false,'Profiler must specify an "id" string and "onRender" function as props',);}}const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);// TODO: The Profiler fiber shouldn't have a type. It has a tag.fiber.elementType = REACT_PROFILER_TYPE;fiber.type = REACT_PROFILER_TYPE;fiber.expirationTime = expirationTime;return fiber; } 復制代碼

createFiberFromMode

/*** 根據 mode 創建 fiber* @param pendingProps* @param mode* @param expirationTime* @param key* @returns {Fiber}*/ function createFiberFromMode(pendingProps: any,mode: TypeOfMode,expirationTime: ExpirationTime,key: null | string, ): Fiber {const fiber = createFiber(Mode, pendingProps, key, mode);// TODO: The Mode fiber shouldn't have a type. It has a tag.const type =(mode & ConcurrentMode) === NoContext? REACT_STRICT_MODE_TYPE: REACT_CONCURRENT_MODE_TYPE;fiber.elementType = type;fiber.type = type;fiber.expirationTime = expirationTime;return fiber; } 復制代碼

createFiberFromSuspense

/*** 根據 Suspense 創建 fiber* @param pendingProps* @param mode* @param expirationTime* @param key* @returns {Fiber}*/ export function createFiberFromSuspense(pendingProps: any,mode: TypeOfMode,expirationTime: ExpirationTime,key: null | string, ) {const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);// TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.const type = REACT_SUSPENSE_TYPE;fiber.elementType = type;fiber.type = type;fiber.expirationTime = expirationTime;return fiber; } 復制代碼

createFiberFromText

/*** 基于文本創建 fiber* @param content* @param mode* @param expirationTime* @returns {Fiber}*/ export function createFiberFromText(content: string,mode: TypeOfMode,expirationTime: ExpirationTime, ): Fiber {const fiber = createFiber(HostText, content, null, mode);fiber.expirationTime = expirationTime;return fiber; } 復制代碼

createFiberFromHostInstanceForDeletion

export function createFiberFromHostInstanceForDeletion(): Fiber {const fiber = createFiber(HostComponent, null, null, NoContext);// TODO: These should not need a type.fiber.elementType = 'DELETED';fiber.type = 'DELETED';return fiber; } 復制代碼

createFiberFromPortal

/*** 創建來自 portal 的fiber* @param portal* @param mode* @param expirationTime* @returns {Fiber}*/ export function createFiberFromPortal(portal: ReactPortal,mode: TypeOfMode,expirationTime: ExpirationTime, ): Fiber {const pendingProps = portal.children !== null ? portal.children : [];const fiber = createFiber(HostPortal, pendingProps, portal.key, mode);fiber.expirationTime = expirationTime;fiber.stateNode = {containerInfo: portal.containerInfo,pendingChildren: null, // Used by persistent updatesimplementation: portal.implementation,};return fiber; } 復制代碼

轉載于:https://juejin.im/post/5d1a17d86fb9a07ea803e28f

總結

以上是生活随笔為你收集整理的React 深度学习：ReactFiber的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。