当前位置：首页 > React

如何缓存react组件

2026-01-15 09:47:07React

缓存React组件的方法

React.memo
使用React.memo对函数组件进行浅比较缓存，避免不必要的重新渲染。适用于props不变的场景。

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

useMemo
缓存组件的计算结果，避免重复计算。适用于依赖项未变化的场景。

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

useCallback
缓存回调函数，避免因函数引用变化导致子组件重新渲染。

如何缓存react组件

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

Context优化
将频繁更新的Context拆分为独立Provider，减少无关组件的渲染。

const ThemeContext = React.createContext();
function App() {
  return (
    <ThemeContext.Provider value={theme}>
      <ExpensiveComponent />
    </ThemeContext.Provider>
  );
}

虚拟化长列表
使用react-window或react-virtualized虚拟化长列表，仅渲染可视区域内的元素。

如何缓存react组件

import { FixedSizeList as List } from 'react-window';
<List height={600} itemCount={1000} itemSize={35}>
  {Row}
</List>

第三方缓存库
使用react-query或swr管理服务器状态缓存，自动处理数据更新和失效。

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

自定义shouldComponentUpdate
类组件中通过实现shouldComponentUpdate手动控制渲染逻辑。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }
  render() { /*...*/ }
}