react如何优化状态
优化 React 状态的常见方法
使用状态管理库
对于复杂应用，引入 Redux、MobX 或 Zustand 等状态管理库，避免深层组件传递 props。Redux 适合全局状态，Zustand 更轻量。
拆分状态粒度
避免将不相关的数据合并到一个状态对象中。例如，将 { user, settings } 拆分为 useUser 和 useSettings，减少不必要的重新渲染。
使用 useMemo 和 useCallback
缓存计算结果和函数引用，避免重复计算和子组件无效更新：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);惰性初始化状态
对于耗时的初始状态，传递函数而非直接值：
const [state] = useState(() => heavyComputation(props));使用 useReducer 替代复杂状态
当状态逻辑涉及多个子值时，useReducer 比 useState 更易维护：
const [state, dispatch] = useReducer(reducer, initialState);避免状态提升过度
仅在必要时将状态提升到父组件。使用 Context API 或组合组件（Component Composition）替代多层传递。
批量状态更新
React 18 及以上版本自动批处理状态更新。旧版本可使用 unstable_batchedUpdates 或依赖库（如 Redux 的 batch）。
选择正确的 Context
为不同用途创建多个 Context，避免单一 Context 包含过多数据导致性能问题。
使用性能分析工具
通过 React DevTools 的 Profiler 检测渲染性能，结合 React.memo 优化子组件：
const MemoizedComponent = React.memo(MyComponent);
