FiberNode结构解析

最新推荐文章于 2024-03-14 11:35:05 发布

batype

最新推荐文章于 2024-03-14 11:35:05 发布

阅读量589

点赞数

分类专栏：前端基础 react Fiber 文章标签：前端 reactjs

songshao_Blog

本文链接：https://blog.csdn.net/qq_35490191/article/details/132743376

版权

前端基础同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

react

9 篇文章 0 订阅

订阅专栏

Fiber

3 篇文章 0 订阅

订阅专栏

FiberNode结构解析

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

function FiberNode(tag, pendingProps, key, mode) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null; // Fiber
  this.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; // Effects

  this.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=8538
    this.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 ----------- span
                  sibling    ||
              		   child || return
              		 	     ||
              		      SongShao

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