React函数组件中useEffect与顶层代码执行的相关问题咨询

原始问题背景 #

我原本的理解是：

• useEffect会在依赖数组中的依赖项更新时执行（若依赖数组为空则仅在首次渲染时执行）；若未指定依赖数组，则会在任意内容触发渲染时执行。
• 函数组件中return语句之外、非Hook内的代码（例如声明useState变量、定义函数）仅执行一次（但不确定具体时机）。

但在以下示例代码中，我发现顶层的console.log语句多次执行，且与useEffect的执行不同步。我无法理解为何该代码会重复执行——即便它在每次渲染时运行（类似未指定依赖数组的useEffect），那useState变量为何没有被重新初始化？

具体问题 #

1. 函数组件中的顶层代码（如示例中的console.log("FLOATING CODE")）何时执行？我原以为它要么仅在初始化时执行，要么在每次渲染时执行，但实际情况似乎并非如此，疑惑为何代码重复执行但初始化代码没有。
2. 为何该顶层代码会执行两次？
3. 为何页面上显示的log值与console.log输出的log值不同？setLog明明写在console.log之前，按理应先更新状态，且页面确实已重新渲染显示了更新后的值。

示例代码 #

import React, { useState, useEffect } from 'react';

const App = () => {
  const [num, setNum] = useState(1);
  const [log, setLog] = useState('');

  const add = () => {
    setNum(num + 1);
  };

  useEffect(() => {
    setLog('useEffect has run-> NUM was rerendered ' + num);
    console.log(log)
  }, [num]);

  // setLog(log + " floating code has run");
  console.log('\n FLOATING CODE HAS RUN ' + num);

  return (
    <>
      <button onClick={add}>{num}</button>
      <div>{log}</div>
    </>
  );
};

export default App;

问题解答 #

1. 函数组件顶层代码的执行时机 #

函数组件本质就是普通JavaScript函数，每次组件触发渲染时，整个函数都会被完整调用执行一次，包括return之外的所有顶层代码（除useState等Hook的特殊逻辑）。

但useState的行为特殊：它不会每次都重新初始化变量。当你调用useState(initialValue)时，React会在组件的内部状态池中存储这个值，只有首次渲染时会使用你传入的initialValue；后续渲染时，useState会直接返回存储在状态池中的当前值，而非重新执行初始化逻辑。这就是顶层代码重复执行，但num和log不会被重置的核心原因。

2. 顶层代码执行两次的原因 #

这是React**严格模式（Strict Mode）**的特性。在开发环境下，Strict Mode会刻意重复调用组件函数、useEffect等逻辑，以此帮你检测潜在的副作用问题（比如非幂等的代码）。生产环境下不会有这个行为，顶层代码只会执行一次。

3. 页面显示与console.log输出不一致的原因 #

这是因为React的状态更新是异步且批量处理的，同时useEffect的回调函数捕获的是当前渲染周期的状态值：

• 当num变化触发渲染后，useEffect回调执行时，它捕获的log是当前渲染周期的旧值（因为setLog只是发起了状态更新请求，不会立刻改变当前渲染周期中的log变量）。
• 页面上显示的log是setLog生效后的下一次渲染的新值，因此会和useEffect里console.log输出的旧值不一致。

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