当前位置：首页 > React

react如何提高渲染

2026-02-11 22:36:12React

优化组件结构

拆分大型组件为更小的、可复用的子组件，减少不必要的重新渲染。使用 React.memo 对纯函数组件进行记忆化，避免在父组件更新时子组件不必要的渲染。

合理使用状态管理

避免将状态提升过高，将状态尽量放置在需要它的组件内部。对于全局状态，使用 Context 或状态管理库（如 Redux、Recoil）并结合 useMemo 或 useCallback 减少不必要的状态更新触发渲染。

避免内联函数和对象

内联函数和对象会导致每次渲染时生成新的引用，触发子组件的重新渲染。使用 useCallback 缓存函数，useMemo 缓存计算结果或对象。

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

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

使用懒加载和代码分割

通过 React.lazy 和 Suspense 实现组件懒加载，减少初始渲染时的负载。结合动态 import() 实现代码分割，提升页面加载速度。

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

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

优化列表渲染

为列表项分配唯一的 key，避免使用索引作为 key。对于长列表，使用虚拟滚动库（如 react-window 或 react-virtualized）减少 DOM 节点数量。

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

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

function VirtualList() {
  return (
    <List height={150} itemCount={1000} itemSize={35} width={300}>
      {Row}
    </List>
  );
}

减少 DOM 操作

避免直接操作 DOM，优先使用 React 的状态和属性控制渲染。对于复杂动画或高频更新场景，考虑使用 CSS 动画或 requestAnimationFrame 优化性能。

使用生产模式构建

确保生产环境使用 React 的生产版本，启用代码压缩和 Dead Code Elimination（如通过 Webpack 的 TerserPlugin）。生产模式下 React 会跳过开发时的警告和检查，提升运行效率。

性能分析工具

使用 React DevTools 的 Profiler 组件或浏览器性能工具（如 Chrome DevTools 的 Performance 面板）分析组件渲染时间，定位性能瓶颈。

react如何提高渲染

import { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
) {
  console.log(`${id} 渲染耗时: ${actualDuration}ms`);
}

<Profiler id="MyComponent" onRender={onRenderCallback}>
  <MyComponent />
</Profiler>

标签: react