React如何调度组件的更新

图上主要讲了协调器的调度过程,就是所说的diff算法。
React的执行流程就是通过触发事件,开启更新流程,执行 VDOM 的相关操作 也就是 reconcile,根据 reconcile 计算出需要变化的 UI 执行对应的 UI 操作 也就是 commit
react在16.3引入Scheduler
Scheduler 的作用:
Scheduler 主要用于任务调度,它允许 React 在不同的渲染任务之间分配不同的优先级。具体来说,Scheduler 让 React 可以:
控制优先级:根据任务的紧急程度(如用户输入或动画)调整渲染的优先级,确保重要的任务先执行。
任务拆分:把渲染过程拆分成多个小任务,并按需执行,以避免阻塞主线程。
异步渲染:通过将渲染工作分解为可中断的任务,React 能够更好地支持异步渲染,避免长时间的渲染阻塞UI更新。
Scheduler 功能:
时间分片:Scheduler 允许 React 通过将渲染过程分割成多个小任务并根据优先级调度它们,以便在空闲时间执行低优先级任务(例如长时间的计算任务)而不会影响到高优先级的用户交互。
高优先级任务优先:例如,当用户进行输入时,React 会给输入事件和相应的更新分配较高的优先级,从而确保用户的交互体验流畅。
#前端#  #前端秋招进度#
全部评论

相关推荐

12-01 00:39
已编辑
美团_前端实习生(实习员工)
#美团前端实习##已OC#已经化身团孝子了!先整理一下时间线吧10.18  一面10.24  二面10.28  口头offer11.01  邮件offer下面就是我的面经了-------------------------------------------------------------------------一面:上来就是自我介绍CSS部分:    position有几个值    怎么实现水平垂直居中    弹性盒子实现方式    css盒模型JS部分:    promise谈谈你的理解    如果有3个请求,首先需要1和2的结果去发出3    说说其他的方式做异步请求    async await怎么处理异常,前面我说了async await    说一下强缓存和协商缓存Vue部分:    说一下vue的生命周期    created和mounted的本质区别    说一下vue通信的方式    provide和inject的数据是响应式吗    事件总线的设计模式    说一下vuex有几部分,分别做什么    action和mutation的区别计算机网络:    tcp和udp的区别    tcp拥塞控制项目:    项目拷打    项目怎么发布的    跨域怎么解决    跨域会携带cookie吗中间穿插三个代码题:    1. 事件循环的代码,看代码说结果    2. 写一下事件总线    3. 写一下快排反问:    我的不足    部门技术栈二面:自我介绍什么时候开始学习前端平时通过什么学习前端?项目选一个你熟悉的说一下说一下项目难点,然后就是一直拷打项目了!前后端联调遇到的困难什么时候可以实习可以实习多久导师方面有阻碍吗你觉得自己的优缺点是什么反问    部门的主要技术栈。    部门对实习生有什么要求。HR面:这就是闲聊了,电话面,跟我说了一下公司情况和福利待遇,沟通一下入职时间#美团##美团前端实习##面经##日常实习##一面##二面##HR面#
查看36道真题和解析
点赞 评论 收藏
分享
评论
2
收藏
分享
牛客网
牛客企业服务