React中如何实现自动与半自动批处理功能？

本文共计530个文字，预计阅读时间需要3分钟。

（+温提醒：大家可以跳过+）话不多说，让我们回归正传+什么是批处理+？我们先看一张图+：这边setState了3次，打印出来仍然是0+；而不是1、2、3+，没错，这就是React的批处理+批处理+：是React中对setState进行批量处理的机制+

( 温馨提醒: 大佬可以跳过 ...)

话不多说, 咱们言归正传

什么是批处理? 我们先看一张图:

这边setState了 3 次, 打印出来 还是 0 ; 而不是1,2,3

没错, 这就是 react 的批处理

批处理 :是 React 中对于 SetState 的合并, 框架内部替你做了一个合并，以此减少渲染次数 ;

注意:

React 18之前的版本 是 半自动批处理; 所以就出现 setState是异步也是同步 ( react 18 之前, 不包括18 )

React 18之后的版本 是 自动批处理; 自动批处理中setState不存在同步了 ( react 18版本开始 )

以react 17版本 和 react 18版本为例子:

1 . react 17版本demo:

我这边 用定时器 和 promise 包裹 this.setState, 发现 count同步打印了;

这边 没用用到 react的 自动批处理; 所以 react 17版本是 半自动批处理

总结: 定时器, 计时器, promise ,async , await, ajax, dom操作等 ,都会把 setState变成 同步执行; 所以 react 17版本的 setState可同步 也可异步

( 拓展: 有人说怎么promise打印在前, 这是因为 微任务 和 宏任务原因 )

( 微任务: promise,async, await ) ( 宏任务: ajax, setTimeout, setInterval, Dom事件)

( 微任务 在DOM执行之前, 宏任务在DOM执行之后)

2. react 18版本demo:

我这边 照样 用定时器 和 promise包裹 this.setState, 发现count还是 0 , 没变化!!

所以react 18版本是 自动批处理(Automatic Batching)

那时候我只有一台录音机也没有电脑 也不敢奢求说唱会让自己的生活变好