react useMemo 作用

`useMemo`是React中的一个高效优化工具，它允许你在组件内部定义一个昂贵（如计算密集型）的操作，并仅在依赖项发生改变时才重新执行这个操作。其主要作用有两点：

1. **性能提升**[^1]：当你有一个计算量大的表达式，比如循环或递归，如果这个表达式的结果在整个组件生命周期内都不会变化，但频繁地被访问，`useMemo`可以帮助缓存计算结果，避免不必要的重复计算，提高性能。

2. **减少DOM更新**：`useMemo`返回的是一个值，这个值会被视为React组件的一部分并插入到DOM中。如果`useMemo`内的计算结果不变，即使组件其他部分重新渲染，浏览器也不必重新渲染包含`useMemo`结果的部分，从而减少了DOM树的变更，进一步优化了渲染效率。

下面是一个简单的`useMemo`示例，展示了如何在一个函数组件中利用它来优化性能：

import React, { useMemo } from 'react';

const HeavyComputation = () => {
  const expensiveResult = useMemo(() => {
    // 假设这是个非常耗时的计算
    const calculate = () => {
      let sum = 0;
      for (let i = 0; i < 10000; i++) {
        sum += i;
      }
      return sum;
    };
    return calculate();
  }, []);

  return (
    <div>
      <p>Calculated Value: {expensiveResult}</p>
    </div>
  );
};

在这个例子中，`expensiveResult`只会在组件首次渲染时计算，后续的渲染除非`[]`依赖数组改变，否则不会再次计算`calculate()`的结果。