当前位置：首页 > React

react如何防止重复

2026-02-26 06:30:59React

防止组件重复渲染

使用 React.memo 对函数组件进行记忆化处理，避免在 props 未变化时重新渲染。适用于纯展示型组件。

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

使用 useCallback 缓存函数

当将函数作为 props 传递给子组件时，使用 useCallback 避免因父组件重渲染导致函数引用变化。

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

使用 useMemo 缓存计算结果

对于昂贵的计算操作，使用 useMemo 进行缓存，仅在依赖项变化时重新计算。

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

避免内联对象和函数

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

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

// 改为预先定义
const childStyle = { color: 'red' };
const handleClick = useCallback(() => {}, []);
<ChildComponent style={childStyle} onClick={handleClick} />

合理使用 shouldComponentUpdate

对于类组件，可以通过实现 shouldComponentUpdate 生命周期方法来控制更新。

shouldComponentUpdate(nextProps, nextState) {
  // 只有特定 props 或 state 变化时才更新
  return this.props.someProp !== nextProps.someProp;
}

使用不可变数据

使用不可变数据更新状态，可以更容易比较前后状态差异。推荐使用 Immer 等库简化不可变更新。

import produce from 'immer';

const [state, setState] = useState({});
setState(produce(draft => {
  draft.someField = 'new value';
}));

拆分大型组件

将大型组件拆分为多个小组件，React 可以更精确地控制每个部分的更新。状态变化时只有相关子树会重新渲染。

虚拟化长列表

对于长列表渲染，使用 react-window 或 react-virtualized 等库实现虚拟滚动，只渲染可视区域内的元素。

react如何防止重复

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

<List
  height={150}
  itemCount={1000}
  itemSize={35}
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>