说说主流前端框架的更新批处理方式

1.背景大家好，我是外星人。说到更新，这是前端框架中老生常谈的问题。这些知识也在面试中。面试官喜欢问。那么在不同的技术框架背景下，处理更新的手段是不同的。今天我们就来探讨一下主流前端框架的批处理方式及其内部实现原理。通过今天的学习，你将获得这些内容：主流前端框架的批量更新方式。vue和react批量更新的实现。宏任务和微任务的特点。1、对于一个vue案例，我们先来思考一个问题。例如在vue的更新中。上面是很简单的逻辑代码，单击该按钮将触发姓名和年龄的更新。所以首先想一个问题：一般情况下，vue的数据层是通过响应式来处理的，那么比如age和name可以理解为一层属性代理，string模板中的属性（name和age）templateget会关联组件的renderingwatcher（vue3.0中的effect）。一个reassignment会触发set，然后根据responsiveness，会触发renderingwatcher重新执行，然后重新更新component和renderview。那么暴露的问题就是我们在handleClick中同时更改了name和age属性，所以一般情况下，name和age的设置会分别被触发，那么如果我们不做，那么renderingwatcher就会被执行了两次，结果组件会更新两次，但这是结果吗？结果是：Vue底层通过批处理只更新一次组件。2.一个react案例上面介绍了vue中批量更新处理的案例之后，我们再来看看react中的批量更新处理。用react实现上面的case：functionIndex(){const[age,setAge]=React.useState(0)const[name,setName]=React.useState('')return

}点击按钮触发更新，会触发useState两次更新功能。所以React的更新过程大致是这样的。首先找到fiberRoot。然后进入和解过程。执行Index组件以获取新元素。Difffiber以获得effectList。执行效果列表，获取最新的dom，进行渲染。所以正常情况下，Index组件会被执行两次。但事实是只执行一次渲染。3批处理的意义上面的案例表明，在主流框架中，批处理用于更新。上下文中的更新合并为一个更新。那么为什么我们需要更新批处理呢？批处理主要是出于性能的考虑。这里我们以react为例，看一下批处理前后的对比：例1：假设没有批量更新：/------js层面-----第1步：一个点击事件触发宏任务。第二步：执行setAge更新光纤状态。第三步：执行渲染阶段，执行Index，得到一个新的元素。获取效果列表。第四步：进入commit阶段，更新dom。第五步：执行setName更新光纤状态。第六步：重复第三步和第四步。/------浏览器渲染------js执行完成，渲染出真正的dom元素。我们可以看到，如果不进行批量更新处理，将会进行很多步骤，包括render阶段、commit阶段、dom更新等，会造成性能浪费。接下来我们看一下批量更新的情况。例2：有批量更新。/------jslevel------第一步：点击事件触发宏任务。第二步：批量处理setAge和setName更新光纤状态。第三步：执行渲染阶段，执行Index，得到一个新的元素。获取效果列表。第4步：进入提交阶段并更新dom。/------浏览器渲染------js执行完毕，渲染出真正的dom元素。从上面我们可以直观的看出更新批处理的作用。本质上很多步骤都是在js的执行上下文中进行优化，降低性能开销。2.宏任务和微任务简介在正式讲批量更新之前，我们先来回顾一下宏任务和微任务。这应该算是前端工程师必须掌握的一个知识点。所谓宏任务可以理解为打印结果：分析核心流程：this的核心方法是通过wrapEvent让handleClick可控。首先，wrapEvent类似于一个事件处理函数。内部通过开关batchEventUpdate来判断是否开启批量更新状态，最后通过flushSyncCallbackQueue清除待更新队列。在批量更新的情况下，事件会被放入更新队列，在非批量更新的情况下，更新任务会立即执行。参考React进阶实战指南