react源码中的fiber架构

最新推荐文章于 2024-08-13 17:14:46 发布

flyzz177

最新推荐文章于 2024-08-13 17:14:46 发布

阅读量412

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_59558923/article/details/127401334

版权

本文详细介绍了React的Fiber架构，包括FiberNode的构造、dom信息节点如tag、key、type和stateNode，Fiber链表树的结构，以及副作用、优先级和Props与State的相关信息。通过Fiber，React实现了分片处理任务，提高了性能和用户体验。文章还讨论了为何引入Fiber架构，以及其在处理复杂组件树时的优势。

摘要由CSDN通过智能技术生成

先看一下FiberNode在源码中的样子

FiberNode

// packages/react-reconciler/src/ReactFiber.old.js
function FiberNode(
  tag: WorkTag,  pendingProps: mixed,  key: null | string,  mode: TypeOfMode,
) {
   
  // 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.nextEffect = null;

  this.firstEffect = null;
  this.lastEffect = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  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=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;
  }

  if (__DEV__) {
   
    // This isn't directly used but is handy for debugging internals:
    ...
  }
}

我们看FiberNode这个构造函数里面只是赋值，我们再找一下链路上的Fiber，我们发现在函数createFiber的返回值类型里面出现了Fiber类型，所以

// packages/react-reconciler/src/ReactInternalTypes.js
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.

  // 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.

  // dom节点的相关信息
  tag: WorkTag,// 组件的类型
  key: null | string, // 唯一值
  elementType: any,// 元素类型

  // 判定fiber节点的类型，用于diff
  type: any,

  // 真实 dom 节点
  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.
  // Remaining fields belong to Fiber

  // fiber 链表树
  return: Fiber | null, // 父 fiber
  child: Fiber | null, // 第一个子 fiber
  sibling: Fiber | null, // 下一个兄弟 fiber
  index: number, // 在父 fiber 下面的子 fiber 中的下标

  // 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,

  // 计算 state 和 props 渲染
  pendingProps: any, // 本次渲染需要使用的 props
  memoizedProps: any, // 上次渲染使用的 props
  updateQueue: mixed, // 用于状态更新、回调函数、DOM更新的队列
  memoizedState: any