关于前端:React-18-Automatic-bacthing

在 React 18 公布之后，新增了许多性能优化的个性，其中一项缩小页面 re-render 的个性，值得关注一下！

Automatic bacthing

在 React 中应用 setState 来进行 dispatch 组件的 State 变动，当 setState 在组件中被调用后，并不会立刻触发从新渲染。React 会执行全副事件处理函数，而后触发一个独自的 re-render，合并所有的更新。
比方在点击 + 1 的例子中，如果办法里间断触发三次 setState，最终 React 会将更新函数放到一个队列里，而后合并队列触发 setState 的 re-render，这就是 batching 的含意。

长处：既能缩小程序数据状态存在两头值导致的不稳定性，也能进步渲染性能。

在 React 18 之前，如果在回调函数的异步调用（setTimeout、then…）中，执行 setState，因为失落上下文 (也就是所说的 同步 )，无奈做合并解决，所以每次 setState 调用都会触发一次 re-render。
比方：

setTimeout(() => {setA('2'); // render 次数 +1
  setA('3'); // render 次数 +1
}, 0)

在 react 18 中这种状况，会默认进行合并解决！
比方：

setTimeout(() => {setB('2');
   setB('3'); // 两次 set，只会 render 一次
 }, 0)

but，如果你真的须要进行两次 render，react 也提供给你了相应的办法～

import {flushSync} from 'react-dom';

...
setTimeout(() => {flushSync(() => {setB('2');
   })
   flushSync(() => {setB('3');
   })
 }, 0)
...

* 留神！！这里要注意一下，如果这么写，flushSync 是不会失效的！！！！*

setTimeout(() => {flushSync(() => {setB('2'); // render 次数 +1
     setB('3'); // render 次数 +1
   })
 }, 0)