FiberNode结构解析

FiberNode（也称为 Fiber 节点）是 React Fiber 架构中的核心概念之一，用于表示组件的层级结构和渲染过程中的任务。

function FiberNode(tag, pendingProps, key, mode) {// 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.dependencies = null;this.mode = mode; // Effectsthis.flags = NoFlags;this.subtreeFlags = NoFlags;this.deletions = null;this.lanes = NoLanes;this.childLanes = NoLanes;this.alternate = null;{// 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;}{// 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);}}
}

tag

表示 FiberNode 的类型，可以是 HostComponent、ClassComponent、FunctionComponent 等。

key

表示组件的唯一标识符，用于在列表渲染中进行元素的重用。

elementType

表示组件元素的类型。大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹。

type

type 属性表示 FiberNode 对应的组件类型，可以是字符串（原生组件）或函数/类（自定义组件）。对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName。

stateNode

每个 FiberNode 包含一个 stateNode 属性，它指向组件实例。stateNode 可以是一个 DOM 元素（对于原生组件），也可以是一个类实例（对于自定义组件）。

FiberNode 使用链表结构来表示组件的层级关系

return

return 指向父节点。

child

child 属性指向第一个子节点。

sibling

sibling 属性指向下一个兄弟节点。

例子：

function App() {return (<div>i am<span>SongShao</span></div>)
}

对应的Fiber树结构

		    App||child || return||--------div ----------------||  			 ||child || return  child || return ||				 ||i am ----------- spansibling    ||child || return||SongShao

这里需要提一下，为什么父级指针叫做return而不是parent或者father呢？因为作为一个工作单元，return指节点执完completeWork（本章后面会介绍）后会返回的下一个节点。子Fiber节点及其兄弟节点完成工作后会返回其父级节点，所以用return指代父级节点。