React函数组件useState setter如何获取prevProps

类组件setState的更新回调能拿到最新prevProps，是React内部对类组件更新队列做的特殊处理：同一事件回调里触发的所有上下游组件状态更新会先完成全链路props计算，再把最终的最新props传入子组件的setState回调，整个流程合并为1次重渲染。
函数组件的useState setter从设计上就不提供props入参，核心原因是函数组件每一次渲染都会生成独立的闭包，事件回调里捕获的是当前渲染帧的props值。你在点击回调里先调用increment()触发父组件step更新，但此时新step还没同步到当前组件的闭包作用域，后续setCount读取到的step自然是旧值，就会出现落后一步的问题。

不推荐用useEffect监听props变化再同步state的方案，这种方案会触发2次重渲染，既损失性能，也可能导致中间状态闪现的问题。

把强耦合的状态和更新逻辑收敛到同一个状态管理单元，从根源上避免跨组件闭包和多次重渲染问题，实现和类组件完全一致的单批次更新效果，最适合的API是useReducer。

实现代码 #

import ReactDOM from 'react-dom/client';
import { useReducer } from 'react';

// 收敛所有耦合状态与更新逻辑
const initialState = {
  count: 0,
  step: 0
};

function appReducer(state, action) {
  switch (action.type) {
    case 'handleClick':
      // 所有状态计算在同一次更新内完成，直接拿到最新值
      const nextStep = state.step + 1;
      return {
        step: nextStep,
        count: state.count + nextStep
      };
    default:
      return state;
  }
}

// 子组件只负责渲染和触发事件，不维护耦合状态
const Counter = ({ count, onClick }) => {
  return <button onClick={onClick}>{count}</button>;
};

const App = () => {
  const [state, dispatch] = useReducer(appReducer, initialState);
  return (
    <Counter 
      count={state.count} 
      onClick={() => dispatch({ type: 'handleClick' })} 
    />
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

方案说明 #

• 所有关联状态的计算逻辑都在reducer中同步完成，不存在跨组件闭包读取旧值的问题
• 一次dispatch只会触发一次全组件树的重渲染，性能表现和类组件实现完全一致
• 逻辑聚合后不需要额外写状态同步代码，可维护性更高
• 如果不想引入useReducer，直接把count状态也上移到父组件维护、子组件做纯展示受控组件，也能达到完全相同的效果，核心思路都是不要把强依赖的状态拆分到不同组件的独立更新队列中维护。

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