标签：react 批处理 18 React promise 版本 半自动 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)
标签：react,批处理,18,React,promise,版本,半自动,setState 来源： https://www.cnblogs.com/520BigBear/p/16387533.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。