深入FiberRoot

hoohack 发布于2019-08-23 16:45 / 2321人阅读

摘要：节点的链表交互的线程上次交互的线程的对象进行中的交互的线程的对象

1. 介绍

整个应用的起点

包含应用挂载的目标起点

记录整个应用更新过程的各种信息

2.相关函数及内容

export function createContainer(
  containerInfo: Container,
  isConcurrent: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isConcurrent, hydrate);
}

在createContainer中我们返回了createFiberRoot函数的执行结果，
然就在ReactFiberRoot中我们调用了createFiberRoot，，它返回一个root对象：

root = ({
      current: uninitializedFiber,
        // 代表当前对应的fiber，这里是未初始化的fiber
      containerInfo: containerInfo,
        // 代表容器的节点
      pendingChildren: null,
        //只有在持久化更新的平台会用到，在react-Dom中不会被用到
      earliestPendingTime: NoWork,
         //最老的正在进行中的任务，这里初始化都为Nowork为0，最低优先级
      latestPendingTime: NoWork,
          //最新的正在进行中的任务
      earliestSuspendedTime: NoWork,
          //最老的被挂起的任务
      latestSuspendedTime: NoWork,
          //最新的被挂起的任务
      latestPingedTime: NoWork,
            
      pingCache: null,

      didError: false,
       //标记整个应用在渲染的过程中是否有错误
      pendingCommitExpirationTime: NoWork,
      //正在提交的任务的ExpirationTime，也就是优先级
      finishedWork: null,
      //在render阶段已经完成了的任务，在commit阶段只会执行finishedWork的任务
      timeoutHandle: noTimeout,
      //用来清理还没有被触发的计时器
      context: null,
      //顶层的context对象，只用在调用“renderSubTreeIntoContainer”的时候在有用
      pendingContext: null,
      hydrate,
      //应用是否要和原来的dom节点进行合并
      nextExpirationTimeToWorkOn: NoWork,
      //记录下一次将要进行的对应的优先级的任务
      expirationTime: NoWork,
      //当前的优先级的任务
      firstBatch: null,
      
      nextScheduledRoot: null,
        //链表的结构，两次react-Domrender渲染的。。节点的链表
      interactionThreadID: unstable_getThreadID(),
      // 交互的线程id
      memoizedInteractions: new Set(),
      //上次交互的线程id的Set对象
      pendingInteractionMap: new Map(),
      //进行中的交互的线程的Map对象
    }: FiberRoot);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103228.html

react解析: render的FiberRoot(三)

摘要：查看创建核心函数源码行调用函数创建是相关，不用管源码行这个指的是调用创建，下面我们将会说到对象源码行源码行函数中，首先创建了一个，然后又创建了一个，它们两者还是相互引用。感谢 yck: 剖析 React 源码解析，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得yck写的真的很棒。React 版本为 16.8.6，关于源码的...

muddyway 2019-08-26 10:42 评论0 收藏0
React源码解析之ReactDOM.render()

摘要：一更新的方式有三种渲染接下来，我们就来看下源码二作用在提供的里渲染一个元素，并返回对该组件的引用常见的用法是这个官网网址源码服务端使用方法渲染节点是让服务端尽可能复用节点，提高性能元素容器应用渲染结束后，调用的函数错误抓取方法本质是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 评论0 收藏0
剖析 React 源码：render 流程（一）

摘要：大家可以看到是构造函数构造出来的，并且内部有一个对象，这个对象是本文接下来要重点介绍的对象，接下来我们就来一窥究竟吧。在构造函数内部就进行了一步操作，那就是创建了一个对象，并挂载到了上。下一篇文章还是流程相关的内容。这是我的剖析 React 源码的第二篇文章，如果你没有阅读过之前的文章，请务必先阅读一下第一篇文章中提到的一些注意事项，能帮助你更好地阅读源码。文章相关资料 React ...

hiYoHoo 2019-05-23 16:24 评论0 收藏0
ReactDom.render分析

摘要：先检验是否存在不存在则执行传入，后的函数创建一个。方法更新执行方法，这个方法最终调用和并返回，这些进行调度算法和进行优先级判断 1.步骤 1.创建ReactRoot 2.创建FiberRoot和FiberRoot 3.创建更新 2. render方法： render( element: React$Element, container: DOMContainer, ...

cjie 2019-08-23 16:43 评论0 收藏0
React源码解析（一）

摘要：是整个应用的起点，包含应用挂载的目标节点，记录整个应用更新过程的各种信息是一个对象是当前应用对应的对象，即。每个节点会对应一个对象，记录节点的各种状态，比如，，这些状态更新完成后会被更新，是所对应节点的实际的实例，比如对应一个就是一个。 ReactDom.render做了什么首先react代码分为react和react-dom两个包，react中代码量特别的少，基本就是API的定义，...

zzbo 2019-08-26 10:26 评论0 收藏0