react如何进行状态管理
React 状态管理方法
使用内置的 useState 和 useReducer
React 提供了 useState 和 useReducer 钩子来管理组件内部状态。useState 适用于简单状态，而 useReducer 更适合复杂状态逻辑。
const [count, setCount] = useState(0);const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}
const [state, dispatch] = useReducer(reducer, initialState);使用 Context API Context API 允许跨组件共享状态，无需手动逐层传递 props。适合全局状态管理。
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}第三方状态管理库 Redux、MobX 和 Zustand 是流行的第三方状态管理库，适用于大型应用或复杂状态逻辑。
-
Redux: 基于单一状态树和纯函数 reducer。
const store = createStore(reducer); -
MobX: 使用响应式编程模型，自动跟踪状态变化。
class Store { @observable count = 0; @action increment() { this.count++; } } -
Zustand: 轻量级，基于 hooks 的状态管理。
const useStore = create(set => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })), }));
服务器状态管理 对于异步数据（如 API 响应），可以使用 React Query 或 SWR 管理服务器状态。
-
React Query:
const { data, isLoading } = useQuery('todos', fetchTodos); -
SWR:
const { data, error } = useSWR('/api/todos', fetcher);
选择合适的方法
- 简单组件状态：
useState或useReducer。 - 跨组件共享状态：Context API 或第三方库。
- 复杂状态逻辑：Redux 或 MobX。
- 服务器状态：React Query 或 SWR。
根据项目规模和需求选择合适的状态管理方案，避免过度设计或过早优化。
