当前位置：首页 > React

如何避免重复渲染react

2026-01-24 11:23:37React

使用 React.memo 进行组件记忆

React.memo 是一个高阶组件，用于包装函数组件以避免不必要的重新渲染。只有当组件的 props 发生变化时，才会重新渲染。

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

使用 useMemo 缓存计算结果

useMemo 可以缓存复杂计算的结果，避免在每次渲染时重新计算。仅当依赖项变化时才重新计算。

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

使用 useCallback 缓存回调函数

useCallback 可以缓存回调函数，避免在每次渲染时重新创建函数实例。适用于将函数作为 props 传递给子组件的情况。

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

避免在渲染函数中进行状态更新

在渲染过程中直接调用 setState 会导致无限循环。状态更新应放在事件处理函数、useEffect 或其他副作用钩子中。

优化 useEffect 依赖项

确保 useEffect 的依赖项数组仅包含真正需要触发副作用的变量。空数组表示仅在组件挂载和卸载时运行。

useEffect(() => {
  fetchData();
}, [dependency]); // 仅在 dependency 变化时运行

使用 shouldComponentUpdate（类组件）

在类组件中，可以通过 shouldComponentUpdate 手动控制组件是否重新渲染。比较新旧 props 或 state 来决定是否更新。

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.value !== this.props.value;
}

避免内联对象和函数

在渲染函数中内联创建对象或函数会导致每次渲染时生成新的引用，可能触发不必要的子组件更新。

// 避免
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />

// 优化
const style = { color: 'red' };
const handleClick = () => {};
<ChildComponent style={style} onClick={handleClick} />

使用 React DevTools 分析性能

React DevTools 提供了 Profiler 工具，可以分析组件渲染时间和原因，帮助识别不必要的渲染并进行优化。

使用虚拟化长列表

对于长列表渲染，使用 react-window 或 react-virtualized 等库进行虚拟化渲染，仅渲染可见部分，减少 DOM 节点数量。

如何避免重复渲染react

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

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

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

标签: react