当前位置：首页 > React

如何提升react的运行效率

2026-01-25 10:02:37React

使用React.memo进行组件记忆化

将函数组件包裹在React.memo中，避免不必要的重新渲染。只有当组件的props发生变化时才会重新渲染。

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* 渲染逻辑 */
});

使用useCallback和useMemo缓存函数和值

useCallback用于缓存函数，避免在每次渲染时重新创建函数。useMemo用于缓存计算结果，避免重复计算。

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

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

避免内联函数和对象

在渲染方法中避免直接创建内联函数或对象，因为它们会导致子组件不必要的重新渲染。

// 避免
<MyComponent onClick={() => handleClick()} />

// 推荐
const handleClick = useCallback(() => {
  /* 逻辑 */
}, []);

<MyComponent onClick={handleClick} />

使用React.lazy和Suspense实现代码分割

通过动态导入组件减少初始加载时间，提升运行时性能。

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

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

优化列表渲染使用key

为列表项提供唯一的key属性，帮助React识别哪些项发生了变化，减少不必要的DOM操作。

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

避免不必要的状态更新

确保setState或useState的更新不会触发不必要的渲染，可以通过条件判断避免。

const [state, setState] = useState(initialState);

// 避免不必要的更新
if (newState !== state) {
  setState(newState);
}

使用生产模式构建

确保在生产环境中使用React的生产版本，避免开发模式的额外检查开销。

npm run build

使用性能分析工具

借助React DevTools和Chrome Performance工具分析组件渲染时间，定位性能瓶颈。

减少Context的更新频率

将Context拆分为多个小范围Context，避免大范围Context更新导致所有消费者重新渲染。

const UserContext = React.createContext();
const ThemeContext = React.createContext();

// 拆分Context减少更新影响
<UserContext.Provider value={user}>
  <ThemeContext.Provider value={theme}>
    <App />
  </ThemeContext.Provider>
</UserContext.Provider>

虚拟化长列表

使用react-window或react-virtualized库虚拟化长列表，仅渲染可见部分内容。

如何提升react的运行效率

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

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

<List height={150} itemCount={1000} itemSize={35} width={300}>
  {Row}
</List>