React 记忆缓存使用

在 React 中，记忆缓存（Memoization）是一种优化技术，用于避免不必要的组件重渲染和计算，提升应用性能。主要通过三个 API 实现： React.memo、 useMemo 和 useCallback。

1. React.memo

用于缓存组件，避免组件在 props 未变化时重新渲染。适用于纯函数组件。

// 缓存组件，只有当 props 真正改变时才重新渲染
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {// 自定义比较函数，返回 true 表示 props 未变，不重新渲染return prevProps.id === nextProps.id;
});

2. useMemo

用于缓存计算结果，避免每次渲染时重复执行昂贵的计算。

function MyComponent({ a, b }) {// 缓存计算结果，只有当 a 或 b 变化时才重新计算const result = useMemo(() => {// 这里是昂贵的计算return expensiveCalculation(a, b);}, [a, b]); // 依赖数组return <div>{result}</div>;
}

3. useCallback

用于缓存函数引用，配合 React.memo 使用，避免因函数引用变化导致子组件不必要的重渲染。

function ParentComponent() {const [count, setCount] = useState(0);// 缓存函数引用，只有当依赖变化时才创建新函数const handleClick = useCallback(() => {console.log('Button clicked');}, []); // 空依赖数组，表示函数不会变化return <MemoizedChild onButtonClick={handleClick} />;
}

使用场景与注意事项

• 只对昂贵的计算或渲染操作使用记忆缓存，否则可能因缓存本身的开销影响性能
• 避免过度使用，简单的计算或组件渲染通常不需要缓存
• 依赖数组必须正确设置，否则可能导致使用过时的值
• useMemo 和 useCallback 都是"最佳努力"的缓存，React 可能在某些情况下丢弃缓存

合理使用这些记忆缓存技术，可以显著提升 React 应用在处理复杂状态和大量组件时的性能。