状态管理

React 组件内 state 用 Hooks；跨组件共享状态可选 Context、Redux Toolkit、Zustand 等。见 Context Hook。

选型简表

场景	建议
父子/兄弟局部共享	提升 state + props
主题、语言、当前用户（低频）	Context
服务端列表/详情、缓存、重试	TanStack Query
复杂客户端全局状态、可预测更新	Redux Toolkit
中小型全局状态、API 简单	Zustand

勿把所有数据放入全局 store；服务端状态与客户端 UI 状态分离是常见架构原则（见 Redux 官方服务端状态 vs 客户端状态说明）。

Redux Toolkit（RTK）

官方推荐的 Redux 写法，内置 Immer、异步 createAsyncThunk、DevTools。

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

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

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

组件侧使用 react-redux 的 useSelector、useDispatch。

Zustand

极简 store，无 Provider 包裹（除非需要 SSR 等）：

import { create } from "zustand";

type BearStore = {
  bears: number;
  increase: () => void;
};

export const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((s) => ({ bears: s.bears + 1 })),
}));

tsx

const bears = useBearStore((s) => s.bears);

TanStack Query（服务端状态）

管理 fetch 的 loading、error、缓存、失效与重新请求：

tsx

const { data, isPending, error } = useQuery({
  queryKey: ["user", userId],
  queryFn: () => fetchUser(userId),
});

与 Redux 互补：Query 管远程数据，Redux/Zustand 管纯客户端状态。

参考文献

以下链接在编写时均可正常访问：

资料	说明
Redux Toolkit 文档	RTK（英文）
React Redux	绑定 React
Zustand 文档	英文
TanStack Query 文档	React 集成