Skip to main content

react组件优化

React 代码的优化可以从多个维度进行，以下是一些常见且有效的优化方式：

1. 使用 React.memo 缓存组件​

对于纯函数组件，使用 React.memo 可以避免不必要的重渲染。它会浅比较 props，如果 props 没有变化，则复用之前的渲染结果。

const MyComponent = React.memo((props) => {
  // 组件逻辑
});

2. 使用 useMemo 缓存计算结果​

对于昂贵的计算操作，可以使用 useMemo 缓存结果，只有依赖项变化时才重新计算。

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

3. 使用 useCallback 缓存回调函数​

当需要向子组件传递回调函数时，使用 useCallback 可以避免因函数引用变化导致子组件不必要的重渲染。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

4. 状态管理优化​

  • 拆分状态：将不相关的状态拆分到不同的组件或使用多个 useState。
  • 局部状态：将状态尽可能靠近需要使用它的组件，避免全局状态管理。
  • 使用 Context API：减少 props drilling，但避免过度使用导致性能问题。

5. 懒加载组件​

使用 React.lazy 和 Suspense 懒加载不常用的组件，减少首屏加载时间。

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

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

6. 避免内联对象和函数​

内联对象和函数会导致每次渲染时创建新的引用，触发子组件重渲染。

// 不好的写法
const MyComponent = () => {
  return <Child style={{ color: 'red' }} />;
};

// 好的写法
const style = { color: 'red' };
const MyComponent = () => {
  return <Child style={style} />;
};

7. 使用 Fragment 避免额外 DOM 节点​

使用 <>...</> 或 <React.Fragment> 包裹多个元素，避免创建额外的 DOM 节点。

const MyComponent = () => {
  return (
    <>
      <h1>标题</h1>
      <p>内容</p>
    </>
  );
};

8. 虚拟列表​

对于大数据列表，使用虚拟列表只渲染可视区域的内容，提升性能。例如 react-window 或 react-virtualized。

import { FixedSizeList } from 'react-window';

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

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