当前位置：首页 > React

react如何缓存组件

2026-02-12 02:54:44React

缓存组件的常用方法

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

使用React.memo

React.memo是一个高阶组件，用于优化函数组件的渲染性能。它会对组件的props进行浅比较，只有当props发生变化时才会重新渲染组件。

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

使用useMemo和useCallback

useMemo可以缓存计算结果，useCallback可以缓存函数引用，两者都可以减少不必要的重新渲染。

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

使用第三方库

react-window和react-virtualized等库可以高效渲染大型列表，只渲染可见区域内的元素。

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

<List
  height={150}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {Row}
</List>

基于路由的组件缓存

使用react-router的keep-alive

react-router本身不直接提供keep-alive功能，但可以通过以下方式实现类似效果：

<Route
  path="/some-path"
  render={(props) => (
    <KeepAlive>
      <Component {...props} />
    </KeepAlive>
  )}
/>

使用react-activation

react-activation是一个专门为React组件提供缓存功能的库：

import KeepAlive from 'react-activation';

function App() {
  return (
    <KeepAlive name="Test">
      <Test />
    </KeepAlive>
  );
}

状态管理中的缓存策略

使用Redux的reselect

reselect可以创建记忆化的selector函数，避免不必要的计算：

import { createSelector } from 'reselect';

const selectItems = state => state.items;
const selectFilter = state => state.filter;

const selectFilteredItems = createSelector(
  [selectItems, selectFilter],
  (items, filter) => items.filter(item => item.includes(filter))
);

使用React Context和useMemo

结合Context API和useMemo可以实现组件树的局部缓存：

const MyContext = React.createContext();

function ProviderComponent({ children }) {
  const value = useMemo(() => ({ /* 计算值 */ }), [/* 依赖项 */]);
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

服务端缓存策略

使用SWR或React Query

这些数据获取库内置了缓存机制：

import useSWR from 'swr';

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

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

使用HTTP缓存头

在API响应中设置适当的缓存头：