当前位置：首页 > React

react组件如何优化

2026-01-24 01:15:18React

减少不必要的重新渲染

使用 React.memo 对函数组件进行记忆化处理，避免在 props 未变化时重新渲染。对于类组件，可以通过 shouldComponentUpdate 手动控制渲染逻辑。

合理使用 useMemo 和 useCallback

useMemo 用于缓存计算结果，避免重复计算。useCallback 用于缓存函数，防止因函数引用变化导致子组件不必要的渲染。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

避免内联对象和函数

内联对象或函数会导致每次渲染时生成新的引用，触发子组件重新渲染。将对象或函数提升到组件外部或使用 useMemo/useCallback 优化。

拆分大型组件

将大型组件拆分为多个小组件，利用 React 的局部更新机制减少渲染范围。状态逻辑过于复杂时，考虑使用 useReducer 或状态管理库（如 Redux、Zustand）。

虚拟化长列表

对于长列表渲染，使用 react-window 或 react-virtualized 实现虚拟滚动，仅渲染可视区域内的元素，大幅提升性能。

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => <div style={style}>Row {index}</div>;

const Example = () => (
  <List height={300} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

优化 useEffect 依赖项

避免在 useEffect 中使用不必要的依赖项，减少副作用函数的执行次数。依赖项为空数组 [] 时，副作用仅在组件挂载和卸载时执行。

使用生产环境构建

开发环境下 React 包含额外的警告和检查，性能较差。部署时使用生产环境构建（如 npm run build），并启用代码压缩和 Tree Shaking。

延迟加载非关键组件

通过 React.lazy 和 Suspense 实现组件懒加载，减少初始加载时间。适用于路由组件或非首屏内容。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);