当前位置：首页 > React

react缓存如何解决

2026-01-24 21:25:08React

React 缓存解决方案

使用 `React.memo` 缓存组件

React.memo 是一个高阶组件，用于缓存函数组件的渲染结果。当组件的 props 未发生变化时，直接返回上一次的渲染结果。

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

使用 `useMemo` 缓存计算结果

useMemo 用于缓存计算结果，避免在每次渲染时重新计算。适用于复杂计算或依赖项未变化的情况。

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

使用 `useCallback` 缓存函数

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

react缓存如何解决

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

使用 `useRef` 缓存可变值

useRef 可以缓存可变值，且不会触发重新渲染。适用于存储不需要触发渲染的变量。

const ref = useRef(initialValue);
ref.current = newValue;

使用 Context 和状态管理库

通过状态管理库（如 Redux、MobX）或 React Context 缓存全局状态，避免不必要的状态传递和重复计算。

react缓存如何解决

const ThemeContext = React.createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.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>;
}

优化列表渲染

对于列表渲染，使用 key 属性和虚拟滚动（如 react-window）减少不必要的 DOM 操作。

import { FixedSizeList as List } from 'react-window';
function MyList() {
  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {({ index, style }) => <div style={style}>Item {index}</div>}
    </List>
  );
}

避免内联对象和函数

内联对象和函数会导致子组件不必要的重新渲染，应尽量避免。

// 不推荐
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />

// 推荐
const style = useMemo(() => ({ color: 'red' }), []);
const onClick = useCallback(() => {}, []);
<ChildComponent style={style} onClick={onClick} />