React Hooks中两段handleChange代码的底层执行差异是什么？

问题背景 #

定义的useState状态：

const [fullName, setFullName] = useState({
    fName: "",
    lName: ""
});

编写了两段handleChange代码：

第一段代码 #

function handleChange(event) {
    const { value, name } = event.target;
    if(name === "fName"){
      setFullName({
        fName:value,
        lName:fullName.lName
      });
    }else if(name === "lName"){
      setFullName({
        fName : fullName.fName,
        lName : value
      });
    }
}

第二段代码 #

function handleChange(event) {
    const { value, name } = event.target;
    setFullName(prevValue => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lname: value
        };
      }
    });
}

两段代码表面运行效果一致，但底层存在什么差异？

核心差异解析 #

1. 状态获取的时机与准确性不同 #

• 第一段代码直接读取fullName这个组件渲染时的状态快照：fullName的值是当前组件渲染周期内固定的，不会考虑队列中还未执行的其他状态更新。
• 第二段代码通过setFullName的函数式参数prevValue获取状态：这个参数是React状态管理队列中的实时最新值，代表当前更新执行时的真实状态。

2. 异步/批量更新场景下的行为天差地别 #

React在事件回调等场景会批量执行状态更新，这时第一段代码会出现状态丢失的问题：
比如连续两次更新fName：

handleChange({ target: { name: 'fName', value: 'A' } });
handleChange({ target: { name: 'fName', value: 'B' } });

第一段代码中，两次更新都会基于同一个旧的fullName快照（比如初始的{fName:"", lName:""}），最终只有最后一次更新生效，中间状态直接被覆盖。

而第二段用函数式更新时，每次都基于上一次的最新状态计算新值，两次更新会正确叠加，最终fName会是B，不会丢失任何一次更新的逻辑。

再举个更直观的例子：假设当前fullName是{fName: "Alice", lName: "Smith"}，连续执行两次更新：

• 用第一段代码的写法，两次更新都基于旧的fullName，最终结果会是{fName: "Alice", lName: "Jones"}，第一次的fName更新被完全覆盖。
• 用第二段代码的写法，第一次更新后prevValue变成{fName: "Bob", lName: "Smith"}，第二次更新基于这个值计算，最终结果是{fName: "Bob", lName: "Jones"}，两次更新都生效。

3. 闭包陷阱的影响不同 #

组件每次渲染时，handleChange都会重新创建并捕获当前周期的fullName值。如果handleChange被延迟执行（比如放在定时器、Promise回调里）：

• 第一段代码拿到的fullName会是组件渲染时的旧值，不是执行时的最新状态；
• 第二段代码通过prevValue能直接拿到执行时的最新状态，完全不受闭包陷阱影响。

总结 #

• 第一段代码只适合简单的单次状态更新场景，在异步、批量更新或延迟执行的场景下，很容易因为闭包捕获旧状态导致更新错误。
• 第二段代码的函数式更新是React官方推荐的方式，当新状态依赖旧状态时，用这种方式能确保拿到最新的状态值，避免各类异常问题。

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