JS如何实现useMemo？记忆化的值

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

useMemo

useMemo

Object.is

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

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

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

useMemo

useMemo

useMemo

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

useMemo

dependencies array

useMemo

useMemo

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

uBrand

一站式AI品牌创建平台，在线品牌设计，AI品牌策划，智能品牌营销；uBrand帮助创业者轻松打造个性品牌！

下载

1. 精确控制何时重新计算：没有它，

   useMemo

   就不知道何时应该更新缓存的值。如果数组是空的（

   []

   ），意味着这个计算只在组件首次渲染时执行一次，之后永远返回相同的值。这在某些场景下很有用，比如初始化一个永远不变的配置对象。
2. 避免陈旧闭包陷阱：这是我个人在实践中遇到最多的问题之一。如果你的计算函数内部使用了某个变量，但这个变量没有被包含在依赖项数组中，那么当这个变量更新时，

   useMemo

   会继续使用旧的变量值进行计算，导致结果不正确。这被称为“陈旧闭包”（stale closure）。比如，你的计算函数里用到了

   props.userId

   ，但你忘记把它放进依赖数组，那么即使

   props.userId

   变了，

   useMemo

   还是会用旧的

   userId

   进行计算。这是个隐蔽的bug，调试起来可能让人头疼。
3. 优化与正确性的平衡：依赖项数组帮助我们在这两者之间找到平衡。放少了，可能导致陈旧数据或错误；放多了，又可能频繁触发计算，失去记忆化的意义。所以，我的经验是，永远把计算函数内部用到的所有外部变量（props、state、其他hooks的返回值等）都列入依赖项数组。如果你发现列入所有依赖项后，

   useMemo

   还是频繁触发，那可能你需要重新思考组件结构，或者考虑是否真的需要

   useMemo

   。

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

useMemo

与

useCallback

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

useMemo

useCallback

• 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

   是一个

   React.memo

   优化的组件，那么

   handleClick

   的记忆化就显得尤为重要。

简而言之，

useMemo

useCallback