React 源码讲解第 3 节- FiberRoot 对象

末蓝、 2022-12-09 04:52 161阅读 0赞

### React 源码讲解第 3 节- FiberRoot 对象 ###

*   *   *  FiberRoot 作用
         *  FiberRoot 与 RootFiber 的关系
         *  FiberRoot 属性

上一节 [React 源码讲解第 2 节-入口 API 之 ReactDOM.render][React _ 2 _-_ API _ ReactDOM.render] 讲到 render 函数的核心步骤。其中非常重要的一个环节就是创建 FiberRoot 对象 。本小节就来介绍一下 FiberRoot 对象包含哪些重要的内容。

### FiberRoot 作用 ###

1.  FiberRoot 是整个应用的根节点。
2.  FiberRoot 包含应用挂载的目标节点。
3.  FiberRoot 记录整个应用更新过程中的各种信息。

### FiberRoot 与 RootFiber 的关系 ###

`FiberRoot.current = RootFiber`  
FiberRoot 的当前节点就是 RootFiber。

`RootFiber.stateNode = FiberRoot`  
RootFiber 的真实节点就是 FiberRoot。

//初始化RootFiber
      const uninitializedFiber = createHostRootFiber(tag);
      //FiberRoot和RootFiber的关系
      //FiberRoot.current = RootFiber
      root.current = uninitializedFiber;
      //RootFiber.stateNode = FiberRoot
      uninitializedFiber.stateNode = root;

### FiberRoot 属性 ###

function FiberRootNode(containerInfo, tag, hydrate) { 
      //root 节点类型()
      this.tag = tag;
      //当前应用root节点对应的Fiber对象
      this.current = null;
      //root根节点，render方法的第二个参数
      this.containerInfo = containerInfo;
      //在持久更新中会用到，不支持增量更新的平台，react-dom 是整个应用更新，所以用不到
      this.pendingChildren = null;
      //缓存
      this.pingCache = null;
      //当前更新对应的过期时间
      this.finishedExpirationTime = NoWork;
      //已经完成任务的FiberRoot对象，在commit(提交)阶段只会处理该值对应的任务
      this.finishedWork = null;
      //在任务被挂起的时候通过setTimeout设置的返回内容，用来下一次如果有新的任务挂起时清理还没触发的timeout
      this.timeoutHandle = noTimeout;
      //顶层 context 对象
      this.context = null;
      this.pendingContext = null;
      // 用来确定第一次渲染的时候是否需要融合
      this.hydrate = hydrate;
      //回调节点
      this.callbackNode = null;
      //回调属性
      this.callbackPriority = NoPriority;
      //树中存在的最旧的未到期时间,第一次挂起的时间。
      this.firstPendingTime = NoWork;
      //第一次 Suspended 时间
      this.firstSuspendedTime = NoWork;
      //最后一次 Suspended 时间
      this.lastSuspendedTime = NoWork;
      //挂起任务中的下一个已知到期时间
      this.nextKnownPendingLevel = NoWork;
      //树中存在的最新的未到期时间
      this.lastPingedTime = NoWork;
      //最新的过期时间
      this.lastExpiredTime = NoWork;
    
      { 
        //交互线程id
        this.interactionThreadID = tracing.unstable_getThreadID();
        //内存线程
        this.memoizedInteractions = new Set();
        //
        this.pendingInteractionMap = new Map();
      }
    }

[React _ 2 _-_ API _ ReactDOM.render]: https://blog.csdn.net/weixin_44135121/article/details/108575542