React状态管理2024完全指南

React状态管理经历了从简单到复杂再到简洁的演进过程。本文将帮你选择最适合项目的状态管理方案。

🎯 状态管理分类

1. 本地状态（Local State）

// useState - 基础状态
const [count, setCount] = useState(0);

// useReducer - 复杂状态逻辑
const [state, dispatch] = useReducer(reducer, initialState);

// 自定义Hook - 状态逻辑复用
function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

2. 全局状态（Global State）

Redux Toolkit - 经典方案

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  }
});

const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

Zustand - 轻量级方案

import { create } from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Jotai - 原子化状态

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
    </div>
  );
}

🎪 服务器状态管理

React Query (TanStack Query)

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// 获取数据
const { data, isLoading, error } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
});

// 更新数据
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries(['todos']);
  }
});

🚀 选择指南

方案	适用场景	优点	缺点
useState	简单组件状态	简单直接	跨组件共享困难
Redux	大型应用	生态完善	样板代码多
Zustand	中小型应用	简洁轻量	生态系统小
Jotai	细粒度状态	原子化设计	学习曲线陡峭
React Query	服务器状态	缓存强大	仅限异步数据

📊 性能对比

• 包大小：Zustand < Jotai < Redux
• 渲染优化：Jotai > Zustand > Redux
• 学习成本：Redux > Jotai > Zustand

总结

2024年的状态管理趋势是”按需选择”，根据项目规模和团队熟悉度选择最适合的方案。