网站仿做,广州网站建设小程序,江苏建设人才网证书查询,临沂色度广告有限公司FiberNode结构解析
FiberNode#xff08;也称为 Fiber 节点#xff09;是 React Fiber 架构中的核心概念之一#xff0c;用于表示组件的层级结构和渲染过程中的任务。
function FiberNode(tag, pendingProps, key, mode) {// Instancethis.tag tag;this.key key;this.el…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?id8538this.actualDuration Number.NaN;this.actualStartTime Number.NaN;this.selfBaseDuration Number.NaN;this.treeBaseDuration Number.NaN; // Its okay to replace the initial doubles with smis after initialization.// This wont 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 isnt 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 (divi amspanSongShao/span/div)
}
对应的Fiber树结构 App||child || return||--------div ----------------|| ||child || return child || return || ||i am ----------- spansibling ||child || return||SongShao 这里需要提一下为什么父级指针叫做return而不是parent或者father呢因为作为一个工作单元return指节点执完completeWork本章后面会介绍后会返回的下一个节点。子Fiber节点及其兄弟节点完成工作后会返回其父级节点所以用return指代父级节点。 index
在父节点中的索引位置。
ref
用于引用组件。
pendingProps
组件的待处理属性。
memoizedProps 和 memoizedState
这些属性保存了组件的当前状态props 和 state。在渲染过程中React 使用 memoizedProps 和 memoizedState 保存组件的最新状态并通过比较前后两次状态的差异确定是否需要更新组件。
updateQueue
用于存储组件的更新队列。
dependencies
表示组件的依赖项。
mode
表示渲染模式。
flags 和 subtreeFlags
表示 FiberNode 的状态标志。
deletions
表示待删除的节点。
lanes 和 childLanes
表示调度的优先级。
alternate
alternate 属性指向 FiberNode 的替代节点。在渲染过程中React 会创建两个 FiberNode一个表示当前渲染状态另一个表示下一次渲染状态。通过 alternate 属性React 在两个状态之间进行比较找出需要更新的节点。
actualDuration、actualStartTime、selfBaseDuration、treeBaseDuration
用于记录组件的实际渲染时间和基准时间。
__debugSource、__debugOwner、__debugNeedsRemount、__debugHookTypes
用于调试和内部记录。
