为何React中console输出顺序不符合预期？（useEffect异步问题）

本质是同步代码与异步代码的执行优先级导致的，结合你的代码逻辑，大概率是以下情况：

• initial：组件初始化阶段的同步输出，最先执行符合预期。
• entry：useEffect回调函数启动时的同步输出，第二个出现也没问题。
• 接下来你在useEffect里调用了loadFilteredResults，但这个函数内部包含异步操作（比如await接口请求、setTimeout，或是依赖Promise的逻辑）：
  1. 调用loadFilteredResults时，函数会执行到异步操作的位置就暂停，把后续的异步任务放到浏览器的任务队列中等待。
  2. 此时会回到useEffect的同步执行流程，先执行console.log('skip')，所以skip先于entry1输出。
  3. 等浏览器处理完当前所有同步任务后，才会执行loadFilteredResults里的异步后续代码，输出entry1。

举个对应你输出顺序的代码场景示例：

console.log('initial'); // 第一个输出

function Shop() {
  useEffect(() => {
    console.log('entry'); // 第二个输出
    loadFilteredResults();
    console.log('skip'); // 第三个输出（同步执行）
  }, []);

  const loadFilteredResults = async () => {
    // await会让函数暂停，先返回Promise
    await fetch('/api/filtered-products');
    console.log('entry1'); // 第四个输出（异步完成后执行）
  };

  // ...其他代码
}

如果你的loadFilteredResults里没有显式的await，也可能是间接用到了异步API（比如用axios发送请求时的回调函数），比如：

const loadFilteredResults = () => {
  axios.get('/api/products').then(() => {
    console.log('entry1'); // 异步回调，最后执行
  });
};

这种情况下，axios请求会立刻发送，但回调函数要等请求完成才执行，所以useEffect里的skip会先输出。

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