React16源码: React中调度之requestWork的源码实现

这篇具有很好参考价值的文章主要介绍了React16源码: React中调度之requestWork的源码实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

requestWork


1 )概述

  • 在 scheduleWork 中,找到了创建更新的fiber对应的root节点
  • 然后对它进行了一些操作之后,调用了 requestWork,开始请求工作
  • 在 requestWork 里面它会做哪些东西呢?
    • 首先我们要把这个root节点加入到调度队列当中
    • 然后判断是否是批量更新
    • 最后再根据 expirationTime 的类型来判断调度的类型

2 )源码

react-reconciler/src/ReactFiberScheduler.js
找到 requestWork文章来源地址https://www.toymoban.com/news/detail-799348.html

// requestWork is called by the scheduler whenever a root receives an update.
// It's up to the renderer to call renderRoot at some point in the future.
function requestWork(root: FiberRoot, expirationTime: ExpirationTime) {
  addRootToSchedule(root, expirationTime);
  if (isRendering) {
    // Prevent reentrancy. Remaining work will be scheduled at the end of
    // the currently rendering batch.
    return;
  }

  if (isBatchingUpdates) {
    // Flush work at the end of the batch.
    if (isUnbatchingUpdates) {
      // ...unless we're inside unbatchedUpdates, in which case we should
      // flush it now.
      nextFlushedRoot = root;
      nextFlushedExpirationTime = Sync;
      performWorkOnRoot(root, Sync, true);
    }
    return;
  }

  // TODO: Get rid of Sync and use current time?
  if (expirationTime === Sync) {
    performSyncWork();
  } else {
    scheduleCallbackWithExpirationTime(root, expirationTime);
  }
}
  • 这里,它接受的参数 一个是 root,另外一个是 expirationTime
    • 这个 expirationTime 并不是我们在创建更新的时候的 expirationTime
    • 它是经过一系列处理之后得到的 expirationTime,它是用来记录任务的过期时间的
  • 进来之后的第一个方法是 addRootToSchedule
    function addRootToSchedule(root: FiberRoot, expirationTime: ExpirationTime) {
      // Add the root to the schedule.
      // Check if this root is already part of the schedule.
      if (root.nextScheduledRoot === null) {
        // This root is not already scheduled. Add it.
        root.expirationTime = expirationTime;
        if (lastScheduledRoot === null) {
          firstScheduledRoot = lastScheduledRoot = root;
          root.nextScheduledRoot = root;
        } else {
          lastScheduledRoot.nextScheduledRoot = root;
          lastScheduledRoot = root;
          lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;
        }
      } else {
        // This root is already scheduled, but its priority may have increased.
        const remainingExpirationTime = root.expirationTime;
        if (
          remainingExpirationTime === NoWork ||
          expirationTime < remainingExpirationTime
        ) {
          // Update the priority.
          root.expirationTime = expirationTime;
        }
      }
    }
    
    • 判断 if (root.nextScheduledRoot === null) , 符合则进行更新
      • 说明这个 root 之前没有进入过调度
      • 内部如果 lastScheduledRoot 为空
        • 注意 firstScheduledRoot 和 lastScheduledRoot 是单项链表结构
        • 用于存储react中的所有 root 的调度关系
        • 如果存在多个root, 可能会形成一个链表的结构
        • 对于只有一个root的情况,只会存在 root.nextScheduledRoot = root 即,等于自己这种情况
        • 这种情况会出现,是因为,先有了一个异步调度的任务
        • 因为一次一个时间片内执行不完,执行不完,把JS的执行权交给浏览器
        • 浏览器这个时候触发了 react 当中的一个新的更新
        • 然后这个更新进来的时候,在react里面,它总共有两种不同优先级的更新
        • 这个时候就会调用两次 addRootToSchedule
        • 这个时候 root.nextScheduledRoot = root 就等于它自己
        • 当然也会存在着有多个root的情况,这个时候就会形成一个链条
        • 这边就是通过判断是否存在 lastScheduledRoot 来判断现在是否有任务正在进行调度
        • 如果没有的话,我们就把first和last直接赋值成root就可以了
        • 那如果有的话,更新 lastScheduleddRoot及其nextSchedulRoot
        • 这就是一个把当前的这个root插到这个调度队列的最后一个的操作
        • 即单项链表插入到最后一个的操作
    • 如果已经进入过调度
      • 获取当前的 expirationTime 并进行判断
      • 如果当前的 expirationTime 是 NoWork 或 新的调度的 expirationTime 比当前任务优先级大
      • 则更新 root.expirationTime 成最高优先级
      • 因为 expirationTime 必须是 root 上优先级最高的
      • 我们要先执行优先级高的任务
      • 对于 root 来说,如果是一个异步调度,expirationTime 最小的任务,过期时间最少
      • 进入到后期调度的过程中,按照比它优先级低的来做,等到它的过期时间到了
      • 我们的调度进程中的判断标准还没有认为过期,就不会强制执行,从而导致任务被推迟
      • 所以,必须把 root.expirationTime 设置成优先级最高的
  • 接下来,判断是否在渲染中,if (isRendering)
    • 说明调度在执行了,这里直接 return
    • react 的调度是有个循环的,会循环 firstScheduledRoot 和 lastScheduledRoot 上面的任务
    • 最终把所有任务更新完,之后把 firstScheduledRoot 和 lastScheduledRoot 清空成 null
    • isRendering 说明循环已经开始,直接return就行
  • 接下来进入批处理的判断, if (isBatchingUpdates)
    • isBatchingUpdates 和 isUnbatchingUpdates 是两个全局变量
    • 是批处理相关的,先跳过
  • 最后,通过 expirationTime是否为 Sync的判断
    • 如果是 Sync,则调用 performSyncWork 方法
      • 相当于同步调用 js 代码,一直执行到结束为止
      • 无法被打断,如果层级很深,则会占用js较长时间,可能导致应用卡顿
      • 在以前版本没有 async 的情况,都是执行 performSyncWork
      • 这样,它的瓶颈是很大的,性能不好
      • 在 react16之后,保留了 sync 的模式,因为应用可能需要这种场景
    • 如果不是,则调用 scheduleCallbackWithExpirationTime 方法
      • 这里进行异步的调度
      • 这里进入了 react 中的独立的包 scheduler
      • 这个包帮我们使用类似 requestIdleCallback 的方式帮助我们在浏览器有空闲的情况下
      • 去执行不是很重要的任务,并且给我们设置 deadline
      • 在 deadline 之前可以执行,在这个 deadline 之后,必须先把执行权交还给浏览器
      • 再等它有空,再来执行任务
      • 这个包用于提升前端应用开发的效率

到了这里,关于React16源码: React中调度之requestWork的源码实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React16源码: React中的updateHostRoot的源码实现

    HostRoot 的更新 1 )概述 HostRoot 是一个比较特殊的节点, 因为在一个react应用当中 它只会有一个 HostRoot , 它对应的 Fiber 对象是我们的 RootFiber 对象 重点在于它的更新过程 2 )源码 定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L612 HostRoot 创建更新的过程就是在 ReactFiberReconcile

    2024年01月22日
    浏览(44)
  • React16源码: React中的beginWork的源码实现

    beginWork 1 )概述 在 renderRoot 之后,要对我们的 Fiber 树每一个节点进行对应的更新 更新节点的一个入口方法,就是 beginWork 这个入口方法会有帮助我们去优化整棵树的更新过程 react 它的节点其实是非常多的,如果每一次子节点的一个更新 就需要每一个节点都执行一遍更新的话

    2024年01月20日
    浏览(47)
  • React16源码: React中的IndeterminateComponent的源码实现

    IndeterminateComponent 1 )概述 这是一个比较特殊的component的类型, 就是还没有被指定类型的component 在一个fibrer被创建的时候,它的tag可能会是 IndeterminateComponent 在 packages/react-reconciler/src/ReactFiber.js 中,有一个方法 createFiberFromTypeAndProps 中,一开始就声明了 在最终调用 createFibe

    2024年01月21日
    浏览(42)
  • React16源码: React中的reconcileChildren的源码实现

    reconcileChildren 1 )概述 在更新了一个节点之后,拿到它的props.children 要根据这个children里面的 ReactElement 来去创建子树的所有的 fiber 对象 要根据 props.children 来生成 fiber 子树,然后判断 fiber 对象它是否是可以复用的 因为我们在第一次渲染的时候,就已经渲染了整个 fiber 子树

    2024年01月20日
    浏览(41)
  • React16源码: React中的performWork的源码实现

    performWork 1 )概述 performWork 涉及到在调度完成,或者同步任务进来之后整个 root 节点链条如何更新 怎么更新一棵 Fiber 树,它的每一个节点是如何被遍历到,以及如何进行更新操作 A. 在执行 performWork 时候,是否有 deadline 的区分 deadline 是通过 reactschedule 它的一个时间片,更新

    2024年01月17日
    浏览(41)
  • React16源码: React中的unwindWork的源码实现

    unwindWork 1 )概述 在 renderRoot 的 throw Exception 里面, 对于被捕获到错误的组件进行了一些处理 并且向上去寻找能够处理这些异常的组件,比如说 class component 里面具有 getDerivedStateFromError 或者 componentDidCatch 这样的生命周期方法 这个class component 就代表它可以处理它的子树当中渲

    2024年01月25日
    浏览(37)
  • React16源码: React中的updateClassComponent的源码实现

    ClassComponent 的更新 1 ) 概述 在 react 中 class component,是一个非常重要的角色 它承担了 react 中 更新整个应用的API setState forceUpdate 在react当中,只有更新了state之后,整个应用才会重新进行渲染 在 class component 中, 它的逻辑相对复杂 2 )源码 在 packages/react-reconciler/src/ReactFiberB

    2024年01月21日
    浏览(40)
  • React16源码: React中的completeUnitOfWork的源码实现

    completeUnitOfWork 1 )概述 各种不同类型组件的一个更新过程对应的是在执行 performUnitOfWork 里面的 beginWork 阶段 它是去向下遍历一棵 fiber 树的一侧的子节点,然后遍历到叶子节点为止,以及 return 自己 child 的这种方式 在 performUnitOfWork 里面,还有一个方法叫做 completeUnitOfWork 在

    2024年01月23日
    浏览(44)
  • React16源码: React中的renderRoot的源码实现

    renderRoot 1 )概述 renderRoot 是一个非常复杂的方法 这个方法里处理很多各种各样的逻辑, 它主要的工作内容是什么? A. 它调用 workLoop 进行循环单元更新 遍历整个 Fiber Tree,把每一个组件或者 dom 节点对应的 Fiber 节点拿出来单一的进行更新,这是一个循环的操作 把整棵 Fiber T

    2024年01月17日
    浏览(43)
  • React16源码: React中的HostComponent & HostText的源码实现

    HostComponent HostText 1 )概述 HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent HostText ,它是单纯的文本节点 主要关注它们的一个更新过程 2 )源码 定位到 packages/react-reconciler/src/ReactFiberBeginWork.js 进

    2024年01月24日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包