当前位置：首页 > React

react如何提高渲染

2026-03-31 01:41:00React

优化组件结构

将大型组件拆分为更小的、可复用的子组件。每个子组件只负责渲染自己的部分，减少不必要的重新渲染。使用 React.memo 对纯函数组件进行记忆化，避免在父组件状态变化时不必要的子组件更新。

使用 useMemo 和 useCallback

对于计算量大的值或函数，使用 useMemo 缓存计算结果，避免每次渲染都重新计算。使用 useCallback 缓存函数引用，防止子组件因函数引用变化而重新渲染。

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

避免内联对象和函数

在渲染方法中避免直接创建内联对象或函数，这会导致每次渲染都生成新的引用，触发子组件不必要的更新。将对象或函数提升到组件外部或使用 useMemo/useCallback 缓存。

使用虚拟列表

对于长列表渲染，使用虚拟列表技术（如 react-window 或 react-virtualized），只渲染当前可见区域的元素，减少 DOM 节点数量。

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

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

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

优化状态更新

避免在状态更新中合并多个 setState 调用，使用函数式更新确保状态依赖正确。批量更新状态以减少渲染次数。

setState(prevState => ({ ...prevState, count: prevState.count + 1 }));

使用生产模式构建

确保生产环境使用 React 的生产构建版本，该版本已移除开发模式的警告和额外检查，性能更优。通过 Webpack 或 Vite 等工具配置 NODE_ENV=production。

减少不必要的上下文更新

避免在 Context 中传递频繁变化的值，或将频繁变化的部分拆分为独立的 Context。使用 useMemo 缓存 Context 提供的值。

const MyContextProvider = ({ children }) => {
  const [state, setState] = useState(initialState);
  const contextValue = useMemo(() => ({ state, setState }), [state]);
  return <MyContext.Provider value={contextValue}>{children}</MyContext.Provider>;
};

使用懒加载和代码分割

使用 React.lazy 和 Suspense 实现组件懒加载，减少初始加载时的 JavaScript 体积。结合 Webpack 的动态 import() 实现代码分割。

react如何提高渲染

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

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

标签: react