如何优化react性能
使用React.memo进行组件记忆
将函数组件包裹在React.memo中，避免不必要的重新渲染。仅当props发生变化时才会重新渲染组件。
const MemoizedComponent = 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]);避免内联对象和函数
内联对象或函数会导致每次渲染时生成新的引用，触发子组件不必要的更新。将对象或函数提升到组件外部或使用useMemo/useCallback优化。
虚拟化长列表
使用react-window或react-virtualized库虚拟化长列表，仅渲染可见区域的元素，减少DOM节点数量。
import { FixedSizeList as List } from 'react-window';
<List height={600} itemCount={1000} itemSize={35} width={300}>
{({ index, style }) => <div style={style}>Item {index}</div>}
</List>减少状态提升
将状态尽可能下放到需要它的组件中，避免全局状态导致过多组件重新渲染。使用Context API时，通过拆分Context或使用useContextSelector优化。
使用生产模式构建
确保生产环境使用React的生产版本，启用压缩和代码优化。通过Webpack的mode: 'production'或Vite的build.minify配置实现。
分析组件渲染性能
使用React DevTools的"Profiler"工具检测组件渲染时间和原因。重点关注不必要的重新渲染，并通过优化props或状态解决。
代码分割与懒加载
通过React.lazy和Suspense实现组件懒加载，减少初始加载时间。结合动态导入（import()语法）实现路由级或组件级代码分割。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>避免频繁的setState调用
合并多次状态更新，或使用函数式更新避免依赖旧状态。对于复杂状态管理，考虑使用useReducer替代多个useState。
优化useEffect依赖项
确保useEffect的依赖数组仅包含必要变量，避免因无关依赖变化触发副作用。必要时使用useRef保存可变值且不触发重新渲染。
