如何避免react渲染多次
使用 React.memo 优化组件
React.memo 是一个高阶组件，用于避免不必要的重新渲染。它会对组件的 props 进行浅比较，只有在 props 发生变化时才重新渲染。适用于纯函数组件。
const MyComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});合理使用 useMemo 和 useCallback
useMemo 可以缓存计算结果，避免在每次渲染时重复计算。useCallback 可以缓存函数引用，避免子组件因函数引用变化而重新渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);避免在渲染函数中进行复杂计算
将复杂的计算逻辑移到 useEffect 中，或者使用 useMemo 进行优化。避免在渲染函数中直接执行耗时操作。
优化状态更新
合并相关的状态更新，减少 setState 调用次数。使用函数式更新确保状态更新的正确性。
setCount(prevCount => prevCount + 1);使用不可变数据
使用不可变数据可以更容易地进行浅比较，帮助 React 快速判断是否需要重新渲染。推荐使用 Immer 等库简化不可变更新。
避免不必要的上下文更新
当使用 Context API 时，将不常变化的值和频繁变化的值分开到不同的上下文中。这样可以避免因某个值变化导致所有消费者重新渲染。
虚拟化长列表
对于长列表渲染，使用 react-window 或 react-virtualized 等库进行虚拟化渲染。只渲染可视区域内的元素，大幅提升性能。
使用生产环境构建
确保在生产环境中使用 React 的生产版本。开发版本的 React 包含额外的警告和检查，会影响性能。可以通过构建工具配置来优化。
分析组件渲染
使用 React DevTools 的 Profiler 功能分析组件渲染情况。找出不必要的渲染并进行针对性优化。重点关注哪些组件渲染过于频繁。
