react如何管理状态
React 状态管理方法
内置状态管理（useState/useReducer）
适用于组件内部简单状态管理。useState 用于基础状态，useReducer 适合复杂状态逻辑。
const [count, setCount] = useState(0); // 基础状态
const [state, dispatch] = useReducer(reducer, initialState); // 复杂逻辑Context API
跨组件层级共享状态，避免 prop drilling。
const ThemeContext = createContext();
<ThemeContext.Provider value={theme}>
<ChildComponent />
</ThemeContext.Provider>
// 子组件通过 useContext(ThemeContext) 获取值第三方状态库（Redux/Zustand/Jotai）
- Redux：单一数据源，通过
dispatch(action)修改状态，搭配useSelector获取状态。 - Zustand：轻量级，无需 Provider，直接创建 store 并订阅。
- Jotai：原子化状态管理，适合组合式状态。
// Redux 示例
const store = createStore(reducer);
// Zustand 示例
const useStore = create(set => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) }));服务端状态管理（React Query/SWR）
处理异步数据，内置缓存、轮询、自动更新等功能。
// React Query 示例
const { data, isLoading } = useQuery('todos', fetchTodos);状态管理选择建议
- 组件内部状态：
useState/useReducer - 跨组件共享：
Context API或轻量库（Zustand/Jotai） - 复杂应用：Redux 或类似方案
- 异步数据：React Query/SWR
状态管理最佳实践
- 避免过度使用全局状态，优先局部状态。
- 不可变更新状态（如使用扩展运算符或 Immer 库）。
- 性能敏感场景使用
useMemo/useCallback优化。
