当前位置：首页 > React

react组件如何优化

2026-02-26 15:11:26React

减少不必要的重新渲染

使用 React.memo 对函数组件进行记忆化，避免在父组件重新渲染时不必要的子组件更新。对于类组件，可以通过实现 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]);

避免在渲染函数中进行复杂计算

将复杂计算逻辑移到 useEffect 或 useMemo 中执行，或者在组件外部预先计算好数据。

优化列表渲染

为列表项设置稳定的 key 属性，避免使用索引作为 key。对于长列表，考虑使用虚拟滚动技术（如 react-window 或 react-virtualized）只渲染可视区域内的元素。

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

<List
  height={150}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>

代码分割和懒加载

使用 React.lazy 和 Suspense 实现组件的懒加载，减少初始包体积。结合 Webpack 的动态导入功能，按需加载组件。

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

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

避免内联函数和对象

在渲染方法中避免创建新的函数或对象，这会导致子组件不必要的重新渲染。将这些值移到组件外部或使用 useMemo/useCallback 进行优化。

使用 Context 时注意性能

当 Context 值变化时，所有消费该 Context 的组件都会重新渲染。可以通过拆分 Context 或将不常变化的值与频繁变化的值分开来优化。

优化事件处理

对于高频触发的事件（如滚动、鼠标移动），使用节流（throttle）或防抖（debounce）技术减少处理频率。

const handleScroll = useMemo(() => debounce(scrollHandler, 300), []);

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [handleScroll]);