JS中useMemo如何实现记忆化值

在JavaScript中，`useMemo`通过缓存计算结果，避免不必要的重复计算，从而提升性能。其核心在于依赖项数组，它决定了何时重新执行计算。本文深入探讨了`useMemo`的实现原理，通过一个简化的`useMemo`示例，展示了如何存储和比较依赖项，以及如何返回缓存值。同时，文章还阐述了`useMemo`解决的性能瓶颈问题，尤其是在处理复杂计算和引用类型时的重要性。此外，还详细解析了依赖项数组的关键作用，以及如何避免常见的陈旧闭包陷阱。最后，对比了`useMemo`和`useCallback`的区别与应用场景，帮助开发者选择合适的记忆化方法，优化React组件的渲染性能。

useMemo的核心思想是通过缓存计算结果并在依赖项未变化时直接返回缓存值来避免重复计算，其关键在于依赖项数组的正确使用，它决定了何时重新执行计算；该机制解决了因不必要的重复计算和引用变化导致的性能瓶颈问题；useMemo用于缓存值，而useCallback用于缓存函数引用，两者共同优化React组件的渲染性能。

在JavaScript中实现useMemo的核心思想，或者说“记忆化”一个值的过程，本质上是缓存一个计算结果，并在其依赖项没有发生变化时，直接返回这个缓存结果，避免不必要的重复计算。这就像是你做了一道复杂的数学题，把答案记下来，下次遇到同样的题目，只要确认条件没变，就直接写答案，不用再从头算一遍。

解决方案

要实现一个简化的useMemo，我们需要一个机制来存储上一次的计算结果和依赖项，并在每次调用时比较当前的依赖项与上一次的是否一致。

function createUseMemo() {
  let lastValue = null;
  let lastDependencies = [];

  return function useMemo(computeFunction, dependencies) {
    // 检查依赖项是否发生变化
    const dependenciesChanged = dependencies.some((dep, index) => {
      // 简单比较，对于引用类型，这可能不够严谨，但足以说明原理
      return dep !== lastDependencies[index];
    });

    if (dependenciesChanged || lastDependencies.length === 0) {
      // 如果依赖项发生变化，或者这是第一次运行，重新计算
      lastValue = computeFunction();
      lastDependencies = dependencies;
    }

    // 返回缓存的值
    return lastValue;
  };
}

// 实际使用时，通常会像React Hooks那样，每个组件实例有自己的状态
// 这里为了演示，我们创建一个实例
const myUseMemo = createUseMemo();

// 示例用法
let counter = 0;

function expensiveCalculation(num) {
  console.log('执行耗时计算...');
  // 模拟一个耗时操作
  for (let i = 0; i < 1000000; i++) {
    num += 1;
  }
  return num;
}

// 第一次调用
const result1 = myUseMemo(() => expensiveCalculation(counter), [counter]);
console.log('结果1:', result1); // 会执行计算

counter = 0; // 依赖项未变

// 第二次调用，依赖项未变，应该直接返回缓存值
const result2 = myUseMemo(() => expensiveCalculation(counter), [counter]);
console.log('结果2:', result2); // 不会执行计算

counter = 1; // 依赖项改变

// 第三次调用，依赖项改变，会重新执行计算
const result3 = myUseMemo(() => expensiveCalculation(counter), [counter]);
console.log('结果3:', result3); // 会执行计算

这个简化的实现展示了useMemo的核心逻辑：比较依赖项，决定是否重新执行计算函数。在实际的React useMemo中，它会更复杂，例如处理多个useMemo调用、确保在组件卸载时清理状态、以及更健壮的依赖项比较机制（比如Object.is或深度比较）。

为什么我们需要记忆化值？它解决了什么痛点？

记忆化，或者说缓存计算结果，在前端开发中解决了一个非常实际且常见的痛点：性能瓶颈。我经常看到一些应用在用户交互时出现卡顿，或者在数据量稍大时就变得迟缓，很多时候，这都源于不必要的重复计算或渲染。

想象一下，你有一个组件，它需要根据一些输入数据进行复杂的计算，比如排序一个巨大的列表，或者处理大量数据以生成一个图表。如果这个组件的父组件仅仅是更新了一个与当前计算无关的状态（比如一个简单的计数器），导致子组件重新渲染，那么这个昂贵的计算就会被再次执行。这就像你每次去厨房拿水，都要重新把水烧开一遍，即使水壶里还有热水。这显然是低效的。

useMemo的出现，就是为了解决这种“无谓的消耗”。它允许我们“记住”一个特定计算的结果，并只在它的“输入”（也就是依赖项）发生变化时才重新计算。这对于那些计算成本高昂、或者生成引用类型（如对象、数组、函数）的场景尤其重要。因为在React的渲染机制里，如果一个子组件的props是引用类型，即使内容没变，只要引用地址变了，它也会触发不必要的重新渲染。useMemo能确保在依赖不变的情况下，返回同一个引用，从而避免了下游组件的不必要更新。对我来说，这不仅仅是优化性能，更是一种编写“更聪明”代码的方式。

useMemo的依赖项数组：为什么如此重要？

useMemo的第二个参数，那个依赖项数组（dependencies array），在我看来，是理解和正确使用useMemo的关键所在。它明确地告诉useMemo：“嘿，只有当这些值中的任何一个发生变化时，我才需要重新执行我的计算函数。”

它的重要性体现在几个方面：

1. 精确控制何时重新计算：没有它，useMemo就不知道何时应该更新缓存的值。如果数组是空的（[]），意味着这个计算只在组件首次渲染时执行一次，之后永远返回相同的值。这在某些场景下很有用，比如初始化一个永远不变的配置对象。
2. 避免陈旧闭包陷阱：这是我个人在实践中遇到最多的问题之一。如果你的计算函数内部使用了某个变量，但这个变量没有被包含在依赖项数组中，那么当这个变量更新时，useMemo会继续使用旧的变量值进行计算，导致结果不正确。这被称为“陈旧闭包”（stale closure）。比如，你的计算函数里用到了props.userId，但你忘记把它放进依赖数组，那么即使props.userId变了，useMemo还是会用旧的userId进行计算。这是个隐蔽的bug，调试起来可能让人头疼。
3. 优化与正确性的平衡：依赖项数组帮助我们在这两者之间找到平衡。放少了，可能导致陈旧数据或错误；放多了，又可能频繁触发计算，失去记忆化的意义。所以，我的经验是，永远把计算函数内部用到的所有外部变量（props、state、其他hooks的返回值等）都列入依赖项数组。如果你发现列入所有依赖项后，useMemo还是频繁触发，那可能你需要重新思考组件结构，或者考虑是否真的需要useMemo。

正确管理依赖项，是写出健壮、高效React代码的基石之一。

useMemo与useCallback：它们有什么关系，何时选择哪个？

useMemo和useCallback是React Hooks家族中一对非常亲密的“兄弟”，它们都服务于“记忆化”的核心思想，但侧重点不同。我经常看到开发者混淆它们，或者过度使用，这其实是没完全理解它们各自的适用场景。

• useMemo记忆的是一个“值”：它可以是任何数据类型，一个数字、一个字符串、一个对象、一个数组，甚至是一个函数（但通常我们不直接用useMemo去记忆函数，而是用useCallback）。它的目的是防止一个耗时的计算逻辑在不必要的时候重复执行，从而避免生成新的值引用。

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  // 这里的memoizedValue 是 computeExpensiveValue 的返回结果

• useCallback记忆的是一个“函数”：它专门用来记忆一个函数定义本身。也就是说，它会返回一个记忆化的函数，只有当这个函数的依赖项发生变化时，才会返回一个新的函数引用。

  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  // 这里的memoizedCallback 是一个函数

何时选择哪个？

我的经验是这样：

1. 当你需要缓存一个“数据结果”时，用useMemo。 比如，你有一个很大的数组需要过滤、排序后展示，或者需要从复杂数据结构中提取一个特定的对象。

   const filteredAndSortedItems = useMemo(() => {
     // 假设这是一个耗时的操作
     return items.filter(item => item.isActive).sort((a, b) => a.name.localeCompare(b.name));
   }, [items]);
   // 只有当 items 变化时，才重新计算 filteredAndSortedItems

2. 当你需要缓存一个“函数定义”并将其作为props传递给子组件时，用useCallback。 这在优化子组件（特别是那些使用了React.memo的子组件）的渲染性能时至关重要。如果父组件每次渲染都创建一个新的函数，即使子组件的逻辑没有变化，React.memo也会因为接收到新的函数引用而重新渲染子组件。

   const handleClick = useCallback(() => {
     console.log('按钮被点击了');
     // 依赖项为空，这个函数引用永远不会变
   }, []);
   
   // ...在JSX中
   <MyButton onClick={handleClick} />

   如果MyButton是一个React.memo优化的组件，那么handleClick的记忆化就显得尤为重要。

简而言之，useMemo是关于“计算结果”的缓存，而useCallback是关于“函数定义”的缓存。它们都是为了减少不必要的计算和渲染，但作用的粒度不同。理解这一点，能帮助你更精准地优化你的React应用，避免过度优化或优化不足的问题。

以上就是《JS中useMemo如何实现记忆化值》的详细内容，更多关于的资料请关注golang学习网公众号！