React中setTimeout和useEffect的执行顺序为什么不符合预期？

技术巧梅提问于 2026-02-17 22:26:26 阅读 26

前端

我在用React写一个计数器组件，点击按钮后先调用setTimeout再更新状态，但发现useEffect里的console.log总是先于setTimeout里的输出。明明setTimeout在代码里写在前面啊，这是事件循环的问题吗？


function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log("Effect ran: " + count); // 总是先执行
  }, [count]);

  const handleClick = () => {
    setTimeout(() => {
      console.log("Timeout: " + count); // 后执行
    }, 0);
    setCount(prev => prev + 1);
  };

  return (
    <button onClick={handleClick}>
      Click me {count}
    </button>
  );
}

我试过把setTimeout的延迟改成100ms就正常了，但想不通为什么0ms时会这样。是不是状态更新和宏任务的执行顺序有特殊规则？

事件循环异步编程

我来解答赞 1 收藏

反馈

2 条解答

Mc.小青 Lv1

这其实不是事件循环的问题，而是React的状态更新机制和JavaScript的宏任务微任务导致的。React的状态更新是异步的，并且会批量处理，你这里的setTimeout是个宏任务，而useEffect是在当前执行栈清空后就会立即触发，比宏任务优先级高。

代码放这了，加个同步日志就能看明白了：

function Counter() {

  const [count, setCount] = useState(0);

  

  useEffect(() => {

    console.log("Effect ran: " + count);

  }, [count]);



  const handleClick = () => {

    console.log("Before timeout");

    setTimeout(() => {

      console.log("Timeout: " + count);

    }, 0);

    setCount(prev => {

      console.log("State update: " + (prev + 1));

      return prev + 1;

    });

  };



  return (

    <button onClick={handleClick}>

      Click me {count}

    </button>

  );

}

点击按钮后的执行顺序是这样的：先打印"Before timeout"，然后执行setCount，这里会触发状态更新调度但不会立即执行，接着useEffect就因为组件重新渲染而触发了，最后才是setTimeout这个宏任务执行。

所以你看，不是setTimeout慢，而是React的状态更新和effect的执行时机比较特殊。想让setTimeout里的值是最新的，记得用函数式更新：

setTimeout(() => console.log("Timeout: " + count), 0);

改成这样：

setTimeout(() => console.log("Timeout: " + (count+1)), 0);

或者用ref存最新值。这种坑我踩过好多次了，习惯了就好。

2026-02-18 18:01

___亚捷 Lv1

这个问题的核心其实是React的状态更新机制和事件循环的交互。你观察到的行为并不是bug，而是因为React的状态更新是异步且批处理的，而setTimeout属于宏任务。

当你调用setCount时，React并不会立即更新状态，而是把状态更新放入一个队列，并在当前执行栈清空后批量处理。useEffect的回调函数会在DOM更新后、下一次绘制前同步执行，它实际上是插在你的setTimeout之前运行的。

建议改成这样的写法来验证：

const handleClick = () => {

  setCount(prev => {

    console.log("State update: " + (prev + 1));

    return prev + 1;

  });

  setTimeout(() => {

    console.log("Timeout: " + count);

  }, 0);

};

你会发现state update的日志会在effect之前打印。至于为什么100ms就正常，是因为这已经超出了React的渲染周期，宏任务自然会等到渲染完成后才执行。

如果你确实需要在状态更新后再做某些操作，可以考虑使用flushSync：

import { flushSync } from 'react-dom';



const handleClick = () => {

  flushSync(() => {

    setCount(prev => prev + 1);

  });

  setTimeout(() => {

    console.log("Timeout: " + count);

  }, 0);

};

不过说实话，日常开发中很少需要这么精确地控制执行顺序。大部分时候我们更应该关注代码的可读性和可维护性，而不是纠结这些底层细节。

2026-02-17 23:02