useState React hook 的奇怪行为

Question

我在useStateReact 钩子上遇到了一些非常奇怪的行为。在以下代码中（https://codesandbox.io/s/purple-bush-nb5uy?file=/src/index.js）：

function App() {
  return (
    <div className="App">
      <Comp flag={true} />
    </div>
  );
}
const Comp = ({ flag }) => {
  const [running, setRunning] = useState(false);
  const [jumping, setJumping] = useState(false);
  console.log('zero');
  
  const setBoth = () => {
    setRunning(true);
    console.log('one');
    setJumping(true);
    console.log('two');
  };

  return (
    <>
      {"running: " + running}
      {"jumping: " + jumping}
      <button onClick={() => setBoth()}>setboth</button>
    </>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当我们点击 时button，我们会在控制台中得到以下序列：

one
two
zero

我希望：

zero
one
zero
two

因为我认为 React 会在找到useStatesetter 后立即重新渲染，并且在重新渲染后执行以下代码。此外，我的 React 应用程序就是这种情况：

const [time, setTime] = useState('');
console.log('Hey');
const updateTime = (e) => {
        setTime(e.details);
        console.log('Hello');
    };

    useEffect(() => {
        window.addEventListener("updateTime", updateTime);            
        return () => {
            window.removeEventListener("updateTime", updateTime);
        }
    }, []);

上面的代码在updateTime运行时和e.detailsvalue 与 state 变量time的内容不同时会发生什么：

Hey
Hello

换句话说，重新渲染首先运行，然后在 setter 之后运行代码。那么，为什么我们在上述情况下会有不同的行为呢？什么是解释，引擎盖下会发生什么？

Answer 1

-第一个问题

根据Dan Abramov 的说法（共同创建者：Redux，Create React App。）

当前（React 16 及更早版本），默认情况下仅对 React 事件处理程序内的更新进行批处理。有一个不稳定的 API 可以在您需要时在极少数情况下强制在事件处理程序之外进行批处理。

无论您在 React 事件处理程序中执行了多少个组件中的多少 setState() 调用，它们都只会在事件结束时产生一次重新渲染

在你的第一种情况下，点击事件是一个反应事件

-第二个问题

根据丹·阿布拉莫夫的说法

但是，在 React 16 和更早版本中，默认情况下在 React 事件处理程序之外还没有批处理。因此，如果在您的示例中我们有一个 AJAX 响应处理程序而不是 handleClick，那么每个 setState() 都会在发生时立即处理。在这种情况下，是的，您会看到一个中间状态：

window.addEventListener 不是反应事件，因此应该立即呈现。

你可以在这里找到丹·阿布拉莫夫 的完整答案

我在这里做了一个包含两个场景的例子