React组件日志输出顺序为何是2,3,1,2,3而非预期的1,2,3？

数据老陈

2026-7-30

React组件日志输出顺序异常原因解析

问题代码

function App() {
  const [isAuth, setIsAuth] = useState(false);
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    if (localStorage.getItem('auth')) {
      setIsAuth(true)
      console.log('User Exists');
    }
    console.log('1');
    setIsLoading(false);
  }, [])
  console.log('2');

  return (
    <AuthContext.Provider value={{ isAuth, setIsAuth, isLoading }}>
      {console.log('3')}
      <BrowserRouter>
        <Navbar />
        <AppRouter />
      </BrowserRouter>
    </AuthContext.Provider>
  )
}

问题与原因

上述组件运行后，控制台日志输出顺序为 2, 3, 1, 2, 3，和预期的 1, 2, 3 存在差异，具体原因如下：

组件首次渲染时，函数体内的同步代码优先执行：先执行console.log('2')，接着渲染JSX时执行{console.log('3')}，此时控制台输出2, 3。
空依赖数组的useEffect触发时机滞后：useEffect(() => {}, [])会在组件首次渲染完成、DOM更新后才执行，所以里面的console.log('1')在首次渲染结束后才输出，此时顺序变为2, 3, 1。
状态更新触发二次渲染：useEffect中调用setIsLoading(false)更新状态，React会触发组件重新渲染。二次渲染时，函数体再次执行console.log('2')，JSX里再次执行{console.log('3')}，因此又输出2, 3。
最终合并所有输出，就得到了2, 3, 1, 2, 3的顺序。