面试官:听说你精通 React 源码,那你讲讲 Scheduler 调度器。我:😭

React Scheduler 的原理是什么,真是太简单了!根本不是你想的什么高大上的东西,50字内给你解释完。

🤖 原理

  1. 根据你传入的不同优先级创建不同过期时间的任务,根据过期时间大小放到任务队列小顶堆里面。

  2. 通过 messageChannel 安排一个宏任务执行 while 循环

    1. 拿到堆顶的任务,如果没过期或者超过 5ms 退出本次工作循环,重新安排一个宏任务,在下一帧执行。

    2. 如果过期了就开始执行这个任务,

      1. 如果任务没有返回值,这个任务就从堆中去掉,然后再拿一个堆顶的任务来执行

      2. 如果这个函数的返回值是一个函数,就退出本次的循环,这个任务保留,重新开始调度一个新的循环。

看到这里,你已经掌握 Scheduler 原理了

🚀 小贴士:小顶堆是什么?

1. 简单的扣胩,就是一棵二叉树,父节点和左右节点中,父节点永远是最小的

2. 也就是说,树顶部的节点永远是最小的,也是就是最早过期的

🤖 schedulerreact 中有什么用呢?

🚀 小例子:先看看这个例子

js 复制代码
function App() {
  const [name, setName] = useState('许泽川')
  
  return name
}

当我们 setName('刘德华') 在做什么呢?

  1. 其实就是创建了一个更新帮我把许泽川变成刘德华,然后触发了一个带有优先级的重渲染任务
  2. 然后呢,scheduler 就会根据这个优先级安排微任务或者宏任务来执行这个重渲染
  3. 等一下重渲染到 App 组件,其实就是重新执行 App 函数,重新执行 useState('许泽川') 在里面应用这个更新帮我把许泽川变成刘德华name 上,这时候拿到 name 就是 刘德华

🚀 小知识:优先级是什么?

点我这里,我告诉你优先级是什么 🥰

优先级不懂的先看上面文章,不然下面的原理看不懂,顺便帮我涨涨点击率 🥰

🚀 scheduler 的用处来喽 😤

  1. 文章里提到 每次 setState 会判断当前上下文拿一个车道出来,创建一个车道对应优先级的更新,和对应优先级的重渲染任务来处理这个更新
  2. 文章里面还提到 连续事件默认事件空闲事件全部通过宏任务 MessageChannel执行重渲染任务 补充一点,就是通过 schduler 来安排宏任务的
js 复制代码
const `优先级` = `连续事件优先级 or 默认事件优先级 or 空闲事件优先级`
scheduler(`优先级`, `setState 对应的重渲染任务`)
  1. useTransition 这个上下文里面 setState,他就会申请到一个 transition 车道,对应的是空闲事件优先级。那么 setState 安排的重渲染任务他是通过宏任务执行。并且他的优先级是最低,是最不重要的,会开启一个叫做 时间切片 的东西。

时间切片就是说,setState 安排的重渲染任务变成了可中断的每 5ms 停止执行,看下图

js 复制代码
function `setState 对应的重渲染任务`() {
  while (执行超过5ms了) {
    重渲染一个 `fiber`
    `performUnitOfWork`(); 
  }
  if (所有的 fiber 还没渲染完) {
    return `setState 对应的重渲染任务`
  }
}
  1. 你看上面的代码,超过 5ms 退出循环后干了什么?返回了这个函数他本身。

返回的这个函数本身 setState 对应的重渲染任务有什么用?

上面我已经把全部原理讲完了,我给一点提示,你们重新看一下文章对应的部分应该就懂了

  1. 记不记得上面提到过的, scheduler(优先级, setState 对应的重渲染任务)

  2. 记不记得上面提到过的,在 scheduler 内部,如果这个函数的返回值是一个函数,就退出本次的循环,这个任务保留,重新开始调度一个新的循环

🤖 相关

跟我一样看过源码的人,可能你可能会出现一个疑问?

当前 fiber 暂停渲染后,再次恢复执行,到底是从头开始重渲染,还是从当前的 fiber 开始重渲染。通过我长期的观察,我找到了真相。

又能水一篇文章🥰
面试官:你说你做过组件库,肯定了解过复杂组件状态管理的useSyncExternalStore吧?我:😭

面试官:你跟我说 setState 是同步的,它不是异步的吗?背错面试题了吧你!我:😭

面试官:你说你开发过组件库,那你怎么会不知道受控组件?面试就到这里吧。我:😭
版权归许泽川所有

如需转载,请提前询问本人的许可

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom8 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github