关于react.js:useState批处理的坑

在学习react的时，对于状态的失效机会，官网阐明多个状态在同时执行的时候会被合并（批处理）。在学习hooks时，跟状态相干的useHooks也认为是同样的批处理。如上面代码：

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Demo = () => {
  const [a, setA] = useState('');
  const [b, setB] = useState('');

  useEffect(() => {
    console.log('触发更新拉');
  }, [a, b]);

  return (<span onClick={() => {
    setA(String(Math.random()));
    setB(String(Math.random()));
  }}>测试</span>);
};

ReactDOM.render(
  <Demo />,
  document.getElementById('container'),
);

再点击时会发现只触发一次，状态的set函数被批处理了。
​

但将下面的代码改变一下：

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Demo = () => {
  const [a, setA] = useState('');
  const [b, setB] = useState('');

  useEffect(() => {
    console.log('触发更新拉');
  }, [a, b]);

  return (<span onClick={() => {
    setTimeout(() => {
      setA(String(Math.random()));
      setB(String(Math.random()));
    }, 300);
  }}>测试</span>);
};

ReactDOM.render(
  <Demo />,
  document.getElementById('container'),
);

此时点击后，会发现触发了两次更细，状态的set函数不批处理了！
​

查阅材料后发现，这是react hooks机制的一个缺点，会打算在react 18中修复，阐明文档在这：
https://github.com/reactwg/react-18/discussions/21

依据阐明文档所说，不仅仅setTimeout批处理会生效，像Promise.then函数中也会生效。