关于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 函数中也会生效。