目录

• • 目录
• • React 状态管理方案怎么选
• • 1. 问题描述
• • 2. 方案一：useState 与 useReducer 本地状态
• • 3. 方案二：Context 跨层级共享状态
• • 4. 方案三：Redux / Zustand 全局状态
• • 5. 方案对比

React 状态管理方案怎么选

1. 问题描述

随着 React 应用复杂化，"状态该放在哪、怎么管理"成为团队争论的焦点。常见的困惑包括：

• • 组件之间如何共享状态？是提升到父组件，还是引入全局状态库？
• • 状态逻辑很复杂（多步骤、多分支）时，useState 是否够用？
• • Context 与 Redux/Zustand 有什么区别？什么时候该上全局状态管理？
• • 项目很小，引入 Redux 是否过度设计？

其实不同的状态管理方案各有适用场景，没有绝对的最好，只有最合适。下面拆解三种主流方案。

2. 方案一：useState 与 useReducer 本地状态

对于组件自己私有的、不跨层共享的状态，优先用 useState。当状态更新逻辑复杂（多个字段联动、依赖前一个值）时，用 useReducer 把更新逻辑集中到 reducer 中。

import { useState, useReducer } from"react";// useReducer：把复杂的状态更新逻辑收敛到 reducerconst initialState = { count: 0, step: 1 };functionreducer(state, action) {switch (action.type) {case"increment":return { ...state, count: state.count + state.step };case"decrement":return { ...state, count: state.count - state.step };case"setStep":return { ...state, step: action.payload };default:return state;  }}exportdefaultfunctionCounter() {// useState 适合简单场景const [name, setName] = useState("张三");// useReducer 适合逻辑复杂的场景const [state, dispatch] = useReducer(reducer, initialState);return (<div><inputvalue={name}onChange={(e) => setName(e.target.value)} /><p>        {state.count}，步长 {state.step}</p><buttononClick={() => dispatch({ type: "increment" })}>+</button><buttononClick={() => dispatch({ type: "decrement" })}>-</button><buttononClick={() => dispatch({ type: "setStep", payload: 5 })}>        步长改为 5</button></div>  );}

原理：useState 提供简单的读写接口；useReducer 通过 dispatch 触发 action、reducer 纯函数计算新状态，逻辑清晰、可测试。

优缺点：零依赖、天然符合 React 哲学。缺点是无法跨组件共享，状态提升后会频繁传递 props。

3. 方案二：Context 跨层级共享状态

当多个组件需要共享同一份数据（如主题、用户、语言），又不希望层层透传 props 时，用 Context。