状态管理选型
状态管理选型的分水岭是“数据规模与更新频率”：组件内数据用 useState/useReducer；跨组件共享少量全局数据用 Context（主题、登录态）；大量数据、频繁更新、多组件订阅（购物车、 Feed 流）上 Zustand 或 Redux Toolkit。
Zustand 是目前轻量首选：一个 create() 生成可共享的 store，组件用 useStore(s => s.count) 选择订阅，没有 Provider 包裹、没有 action 模板代码。Redux 仍是大型项目可选项——Redux Toolkit + RTK Query 把样板代码降到可接受范围。
- useState/useReducer：组件内部状态
- Context：全局只读 / 低频数据（主题、用户、语言）
- Zustand / Redux Toolkit：高频更新的大量共享数据
状态管理
// 方案对比（伪代码，展示思路差异） // ① Context：适合低频全局数据 const ThemeCtx = createContext(); function App() { const [user, setUser] = useState(null); return <ThemeCtx.Provider value={{ user, setUser }}><Pages/></ThemeCtx.Provider>; } // ② Zustand：API 最少的共享 store // import { create } from 'zustand'; const useCart = create((set) => ({ items: [], add: (item) => set(state => ({ items: [...state.items, item] })), clear: () => set({ items: [] }), })); function Cart() { // 选择器订阅：只订阅 items，别处更新不重渲染本组件 const items = useCart(state => state.items); const add = useCart(state => state.add); return <button onClick={() => add({ id: Date.now() })}>加购</button>; } // ③ Redux Toolkit：大型项目、强约束、有生态（RTK Query / 持久化） // const { configureStore, createSlice } = require('@reduxjs/toolkit'); const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { addOne: (state) => { state.value += 1; }, // Immer 让你可以“直接改” }, }); const store = configureStore({ reducer: { counter: counterSlice.reducer } });
本节要点选型口诀：组件内 useState → 全局低频 Context → 高频大量 Zustand（轻）/ Redux Toolkit（大）。
