useMemo

useMemo 是 React 中的一个 Hook，用于优化性能。它通过记住（缓存）计算结果，避免在每次渲染时都重新计算，从而提高性能。useMemo 接受两个参数：一个是创建函数，另一个是依赖数组。当依赖数组中的值发生变化时，创建函数会重新执行，并返回新的值。

以下是一个简单的例子，展示了如何使用 useMemo：

import React, { useMemo, useState } from 'react';

function ExpensiveComputationComponent({ num }) {
  // 这个函数模拟一个耗时的计算
  const expensiveComputation = (num) => {
    console.log('计算中...');
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += num;
    }
    return result;
  };

  // 使用 useMemo 缓存计算结果
  const computedValue = useMemo(() => expensiveComputation(num), [num]);

  return (
    <div>
      <p>计算结果：{computedValue}</p>
    </div>
  );
}

function App() {
  const [num, setNum] = useState(1);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComputationComponent num={num} />
      <button onClick={() => setNum(num + 1)}>增加 num</button>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <p>count: {count}</p>
    </div>
  );
}

export default App;

在这个例子中，ExpensiveComputationComponent 组件接收一个 num 属性，并进行一个模拟的耗时计算。通过使用 useMemo，我们可以确保只有在 num 发生变化时才重新计算结果，而不是在每次渲染时都重新计算。这样可以显著提高性能，尤其是在计算量很大的情况下。