react如何代码优化

减少不必要的重新渲染

使用 React.memo 包装函数组件以避免在 props 未变化时重新渲染。对于类组件，可以通过 shouldComponentUpdate 或继承 PureComponent 实现类似效果。

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]);

优化状态管理

避免将不相关的状态放在同一 useState 中，拆分状态可减少不必要的更新。复杂状态逻辑优先考虑 useReducer。

const [state, dispatch] = useReducer(reducer, initialState);

虚拟化长列表

使用库如 react-window 或 react-virtualized 实现列表虚拟化，仅渲染可见区域的元素。

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>

按需加载组件

通过 React.lazy 和 Suspense 实现组件动态加载，减少初始包体积。

const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

避免内联函数和对象

内联函数或对象会导致每次渲染时生成新的引用，可能触发子组件不必要的更新。将它们移至组件外部或使用 useMemo/useCallback 优化。

使用生产环境构建

生产环境下启用代码压缩和 Tree Shaking（通过 Webpack 等工具），移除未使用的代码和调试信息。

npm run build

性能分析工具

利用 React DevTools 的 Profiler 功能分析组件渲染时间，定位性能瓶颈。Chrome 的 Performance 工具也可辅助检测运行时问题。

代码分割

通过动态 import() 语法或工具（如 Webpack 的 splitChunks）拆分代码，减少初始加载时间。

import('./module').then(module => { /* 使用模块 */ });