为什么 setData 能获取到 prev 参数？(自学用)

1. 核心原理：React 状态更新的设计逻辑

React 的 setState（类组件）/ setData（useState 钩子）本质是状态更新函数，React 为了让开发者能基于「当前最新状态」更新数据，特意设计了两种调用方式：

方式 1 ：直接传值 → setData(newValue)
方式 2 ：传回调函数 → setData(prev => newVal)

这里的 prev 是 React 主动传入的参数，代表「更新前的最新状态值」，原因有 2 点：

(1) 解决「状态更新异步性」问题

React 的状态更新（尤其是合成事件 / 钩子中）是异步批量更新 的，直接读取当前状态可能拿到旧值，而回调函数中的 prev 会被 React 保证是「更新前的最新值」。

示例（异步更新问题）：

tsx 复制代码

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

const handleClick = () => {
  // 异步更新：此时count还是0，两次setCount都会基于0+1，最终count=1
  setCount(count + 1); 
  setCount(count + 1); 

  // 用prev参数：基于最新状态更新，最终count=2
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
};

(2) 保证状态更新的「原子性」

当多个地方同时更新同一个状态时，prev 能确保每次更新都基于上一次的最终结果，避免状态覆盖。React 内部会把所有更新回调加入队列，依次执行，每次执行时传入的 pre 都是上一次执行后的结果。

2. 底层逻辑（简化版）

React 内部对 setData 的处理逻辑类似这样：

tsx 复制代码

// 模拟useState的setData实现
function createSetter(queue) {
  return function setState(newValue) {
    // 如果是函数，先执行函数，传入上一次的状态值
    const updateFn = typeof newValue === 'function' ? newValue : () => newValue;
    // 从队列中取出上一次的状态（prev）
    const prevState = queue.lastState;
    // 计算新状态
    const newState = updateFn(prevState);
    // 更新队列并触发重渲染
    queue.lastState = newState;
    triggerRender();
  };
}

简单说：React 检测到你传的是函数，就会自动把「当前最新的状态值」作为参数传给这个函数，这就是 prev 的来源。

3. 适用场景（必须用 prev 的情况）

状态更新依赖自身旧值（如计数、累加、数组追加）；
多次连续更新同一个状态；
异步操作中更新状态（如定时器、接口回调）。