React中useState两种更新写法的差异及实践疑问

核心差异 #

• setValue(curr + 1)：直接传递基于当前状态快照计算出的新值。这个快照是组件渲染时闭包捕获的，如果在异步操作（如setTimeout、网络请求）或连续多次更新中使用，可能会因为闭包引用旧值，导致状态更新不符合预期。
• setValue(prev => prev + 1)：传递一个更新函数，React会在执行状态更新时，自动传入最新的状态值作为参数。这种写法能确保始终基于最新状态计算新值，规避闭包陷阱。

本地可测试的React示例 #

你可以直接将以下代码复制到React项目的App.js中运行测试：

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // 直接传值：异步场景下会捕获旧状态
  const asyncDirectUpdate = () => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  };

  // 函数式更新：异步场景下始终获取最新状态
  const asyncFunctionalUpdate = () => {
    setTimeout(() => {
      setCount(prev => prev + 1);
    }, 1000);
  };

  // 连续直接更新：三次调用都用同一个旧状态快照
  const batchDirectUpdate = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  // 连续函数式更新：每次都基于最新状态计算
  const batchFunctionalUpdate = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h3>当前计数：{count}</h3>
      <div style={{ margin: '1rem 0' }}>
        <button onClick={asyncDirectUpdate}>异步直接更新（等待1秒）</button>
        <button onClick={asyncFunctionalUpdate} style={{ marginLeft: '1rem' }}>异步函数式更新（等待1秒）</button>
      </div>
      <div>
        <button onClick={batchDirectUpdate}>连续3次直接更新</button>
        <button onClick={batchFunctionalUpdate} style={{ marginLeft: '1rem' }}>连续3次函数式更新</button>
      </div>
    </div>
  );
}

export default App;

测试步骤与预期结果 #

1. 连续更新测试：
   • 点击「连续3次直接更新」，计数只会变为1——因为三次调用都使用了同一个count快照（点击时的当前值），最终相当于只执行了一次setCount(0+1)。
   • 点击「连续3次函数式更新」，计数会变为3——每次调用都基于最新的prev值累加，三次后得到正确结果。
2. 异步更新测试：
   • 点击「异步直接更新」后，立刻手动点击几次普通的计数增加（比如再点几次直接更新按钮），1秒后计数只会加1——setTimeout里的count是点击时的旧快照。
   • 点击「异步函数式更新」后，同样手动操作，1秒后计数会在最新值基础上加1——更新函数始终获取最新状态。

事件处理器外调用setValue的情况 #

• 组件渲染阶段直接调用：会触发无限循环——状态更新导致组件重新渲染，渲染时又更新状态，往复不停。
• useEffect中调用：
  • 如果依赖项为空数组，只会执行一次，是安全的（比如初始化时设置状态）。
  • 如果依赖项包含状态，要注意避免无限循环，此时用函数式更新更稳妥（无需将状态加入依赖）。
• 组件外部全局调用：不推荐，因为闭包可能无法获取最新状态，且组件卸载后调用会导致内存泄漏。必须在组件生命周期内（如useEffect、自定义钩子）合理调用。

是否始终优先使用函数式更新？ #

不是绝对的，按需选择：

• 必须用函数式更新的场景：新状态依赖当前状态（如计数累加、布尔值切换）、异步操作中更新状态、连续多次更新状态。
• 直接传值更合适的场景：新状态是固定值，不依赖当前状态（如setCount(10)、setUsername('Tom')），写法更简洁清晰。

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