一:概念
setState 用于变更状态,触发组件重新渲染,更新视图
二:setState是不是异步?
setState不是真异步,而是看上去是异步的,在源码中通过isBacthingPudates判断真异步还是同步。
异步更新:在生命周期,react合成事件中
同步更新:原生事件中,如addEventListener, setTimeout setInterval
三:探究setState的异步更新(批量更新)。会攒在一起更新
在react生命周期或者合成事件中,setState是异步更新,相同的setState只会更新最后一次,render也只render一次。
批量更新机制:
setState更新的时候,会定义一个批量更新对象(updateQueue),其中有一个属性变量标识(batchedUpdates),判断setState所处的环境是react合成事件或生命周期还是与react无关的事件,默认是false。
我们在调用合成事件和生命周期的时候,都会改变这个变量标识为true,React此时就会知道setState在自己掌握中。
那么在setState的时候,会判断该变量标识的值,如果是fasle,也就是setState同步更新,如果是同步,那么直接更新组件。
如果判断是异步,那么react’就会收集setState,也就是收集我们定义的收集器,将我们的setState每个都push到定义的批量更新对象(updateQueue)的数组中,然后等事件函数结束的时候重置这个变量标志,才会取出之前缓存的setState,进行一次执行。(react等待事件处理程序中所有代码运行后在处理state的更新,这可能会让你想起在餐厅点菜的服务员。服务员不会一听到你点的第一道菜就跑到厨房!相反,他们会先让你完成你的订单,让你修改它,甚至接受桌子上其他人的订单。)
设置批量更新队列
判断是否是批量更新 批量更新就加入到队列中 否则就直接调用
绑定事件的时候 加上批量处理逻辑
四:setState异步的意义:
批量更新允许您更新多个 state 变量 —— 甚至来自多个组件 —— 而不会触发太多的重新 render。但这也意味着,在事件处理程序和其中的任何代码完成之前,UI 不会更新。这种行为,也称为批量处理,使你的 React 应用运行得更快。它还避免了处理令人困惑的“半成品”呈现,只有其中的一些变量被更新。
React 不会跨多个意图事件(如单击)进行批量处理 —— 每个单击都是单独处理的。请放心,React 只在一般情况下是安全的情况下进行批量处理。这可以确保比如,如果第一次单击按钮禁用了一个表单,那么第二次单击不会再次提交它。