组件缓存秘籍：揭秘 React 中的 memo 和 useMemo

2023-03-04 18:01:12

探索 React 组件缓存：性能优化利器

在 React 应用中，组件缓存扮演着至关重要的角色，因为它可以极大地提升应用性能。本文将深入探讨 React 中两种常见的组件缓存技术：memo 和 useMemo，帮助你了解它们的原理、区别以及实际应用。

什么是 React 组件缓存？

组件缓存是一种将组件实例存储起来的技术，以便在未来需要时快速访问。这就像在你的冰箱里保存食物一样，当你想吃东西时，你不需要从头开始烹饪，只需从冰箱里拿出来就可以了。同样地，组件缓存可以省去每次渲染组件所需的昂贵开销，从而提高应用的流畅性和响应速度。

memo：缓存子组件

memo 是一种高阶组件，它可以将函数组件包装成缓存组件。当一个组件被 memo 包装后，它会比较新旧 props 的差异。如果差异很大，则重新渲染组件；如果差异很小，则直接返回缓存的组件实例。

想象一下一个购物清单组件，它显示了一组商品及其数量。每次用户添加或删除商品时，组件都会重新渲染。使用 memo 包装购物清单组件可以防止不必要的重新渲染，因为它只会重新渲染当商品列表发生变化时。

import React, { memo } from 'react';

const ShoppingList = memo((props) => {
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.name} - {item.quantity}</li>
      ))}
    </ul>
  );
});

useMemo：缓存组件自身

useMemo 是一种 React Hook，它可以缓存一个函数的返回值。当缓存函数的依赖项发生变化时，useMemo 会重新计算函数并返回新的值；否则，直接返回缓存的值。

例如，我们可以使用 useMemo 缓存一个复杂的计算，该计算对于组件的渲染至关重要。这可以防止每次组件重新渲染时都重新计算，从而提高性能。

import React, { useMemo } from 'react';

const MyComponent = () => {
  const data = useMemo(() => {
    // 计算复杂的数据
    return /* ... */;
  }, [/* 依赖项列表 */]);

  // 组件内容
};