useEffect中alert先于组件重渲染触发？HP显示异常问题咨询

按照我对useEffect的理解，它会在组件每次渲染周期后运行，难道组件不该先重渲染显示0再触发alert吗？

我对useEffect的理解： #

useEffect是React提供的Hook，允许在函数组件中执行副作用。它会在组件每个渲染周期后运行。

默认情况下，useEffect会在初始渲染和每次更新后运行。不过你可以通过传入依赖数组作为第二个参数来控制它的运行时机，该数组包含副作用依赖的值，只有当这些值变化时才会运行副作用。

截图说明： #

代码示例： #

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [hp, setHp] = useState(3);

  useEffect(() => {
    
    if (hp === 0) {
      alert("You won!");
    }
  }, [hp]);

  function handleClick() {
    setHp((prev) => {
      return prev - 1;
    });
  }

  return (
    <div className="App">
      {<h1>HP: {hp}</h1>}
      <button style={{ fontSize: "24px" }} onClick={handleClick}>
        Reduce HP by 1
      </button>
    </div>
  );
}

这是因为React的DOM更新与useEffect执行是异步排队的，但alert会阻塞浏览器渲染线程，具体流程如下：

1. 点击按钮触发setHp，React计算出新的hp值（从1变为0），并将DOM更新任务放入浏览器任务队列，等待当前同步任务完成后执行。
2. React随即调度依赖hp变化的useEffect执行——此时hp已经是0，因此触发alert("You won!")。
3. alert是同步阻塞操作，弹出后会暂停浏览器所有后续任务（包括未执行的DOM更新），直到用户确认关闭alert。
4. 关闭alert后，浏览器才会执行之前排队的DOM更新，将页面上的HP从1改为0。

如果想让页面先显示0再弹出alert，可以把alert放入setTimeout，让它延迟到DOM更新完成后执行：

useEffect(() => {
  if (hp === 0) {
    setTimeout(() => alert("You won!"), 0);
  }
}, [hp]);

setTimeout会把alert任务放到下一个事件循环，给React足够时间完成DOM渲染。

内容的提问来源于stack exchange，提问作者Marc