当前位置：首页 > React

react的组件如何做缓存

2026-01-25 20:17:52React

React 组件缓存的实现方法

在 React 中，可以通过多种方式实现组件缓存以提高性能。以下是几种常见的方法：

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

React.memo 是一个高阶组件，用于对函数组件进行浅比较，避免不必要的重新渲染。

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

React.memo 默认只会对 props 进行浅比较。如果需要自定义比较逻辑，可以传入第二个参数：

React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
});

使用 `useMemo` 缓存计算结果

useMemo 可以缓存计算结果，避免在每次渲染时都重新计算。

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

使用 `useCallback` 缓存函数

useCallback 可以缓存函数实例，避免在依赖项未变化时重新创建函数。

react的组件如何做缓存

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

使用 Context 配合记忆化组件

当使用 Context 时，可以将 Context 消费者组件用 React.memo 包裹以避免不必要的渲染。

const MyContext = React.createContext();

const MemoizedConsumer = React.memo(function Consumer() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
});

使用第三方库实现缓存

一些第三方库提供了更高级的缓存功能：

react-query: 用于数据获取和缓存

react的组件如何做缓存

const { data } = useQuery('todos', fetchTodos);

swr: 另一种数据获取和缓存方案

const { data } = useSWR('/api/user', fetcher);

redux-reselect: 用于创建记忆化的选择器

const selectUser = createSelector(
state => state.users,
(_, userId) => userId,
(users, userId) => users[userId]
);

虚拟化长列表

对于长列表渲染，可以使用虚拟化技术只渲染可见部分：

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

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

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

使用 KeepAlive 模式

某些场景需要保持组件状态不被卸载，可以使用类似以下模式：

function Tab({ isActive, children }) {
  const [shouldRender, setShouldRender] = useState(isActive);

  useEffect(() => {
    if (isActive) setShouldRender(true);
  }, [isActive]);

  return (
    <div style={{ display: isActive ? 'block' : 'none' }}>
      {shouldRender ? children : null}
    </div>
  );
}

选择哪种缓存策略取决于具体场景。React.memo 适用于纯展示组件，useMemo 和 useCallback 适用于优化计算和函数创建，而数据获取场景则适合使用专门的缓存库。