React中获取状态前值的两种方式对比：回调法有何优势？

在React里，用回调函数（方式一）获取前状态更新的核心优势，是彻底避免因闭包或异步更新机制导致的「过时状态」问题，具体来说有这几个场景：

• 应对异步批量更新的不确定性
  React的状态更新是异步批量处理的，尤其是在事件处理、生命周期钩子这类场景里。如果用方式二直接引用当前的fullName，你拿到的可能是更新前的旧值——因为状态还没来得及同步更新到当前渲染上下文。

  比如连续触发两次输入变更：

  // 假设初始fullName是 {fName: "", lName: ""}
  handleOnChange({target: {name: "fName", value: "张三"}});
  handleOnChange({target: {name: "lName", value: "李四"}});
  

  方式二中两次setFullName都基于同一个旧的fullName闭包值，最终只会保留最后一次的更新结果；而方式一通过preValue拿到每次更新后的最新状态，两次变更都会被正确累加，最终得到{fName: "张三", lName: "李四"}。

• 避开闭包陷阱
  函数组件每次渲染都会重新创建handleOnChange，里面的fullName是当前渲染周期的闭包值。如果在异步操作（比如setTimeout、网络请求回调）里调用状态更新，方式二的fullName可能是很久之前的旧值，完全不符合预期。

  比如：

  // 错误示例：方式二在异步场景下拿不到最新状态
  setTimeout(() => {
    setFullName({...fullName, fName: "异步更新的名字"});
  }, 1000);
  

  这里的fullName是触发setTimeout时的旧值，哪怕1秒内状态已经变了，更新还是基于旧值。而用回调的话：

  // 正确示例：方式一总能拿到最新状态
  setTimeout(() => {
    setFullName(prev => ({...prev, fName: "异步更新的名字"}));
  }, 1000);
  

  prev会直接取React内部维护的最新状态，不受闭包影响。

• 保证状态更新的原子性
  当你的状态更新逻辑依赖前一次的状态结果时，回调函数的方式能确保每次更新都是原子化的——基于上一次的最终状态来修改，不会出现状态覆盖或丢失的情况。方式二如果遇到频繁的状态变更，很容易因为闭包值的滞后性导致更新出错。

总结来说，方式一的写法更稳健，能适应绝大多数复杂场景，尤其是涉及异步操作或频繁状态更新的情况，这也是为什么官方和社区示例普遍推荐这种写法。

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