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