React hooks——useMemo

一、简介

useMemo 是 React 提供的一个 Hook，用于性能优化，它通过"记忆"（memoization）计算结果来避免在每次渲染时都进行不必要的复杂计算。

1.1 基本用法

javascript 复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

第一个参数：计算函数，返回需要记忆的值
第二个参数：依赖项数组，只有当依赖项发生变化时，才会重新计算值

1.2 主要特点

性能优化：避免在每次渲染时都执行昂贵的计算
引用稳定性：当依赖项未变化时，返回相同的引用，有助于避免子组件不必要的重新渲染
与 useEffect 的区别：
- useMemo 在渲染期间执行
- useEffect 在渲染完成后执行

二、代码实现

javascript 复制代码

import { useState, useMemo } from "react";

// 计算斐波那契数列之和
const fib = (n) => {
  console.log("计算函数执行了");
  if (n <= 1) {
    return 1;
  }
  return fib(n - 1) + fib(n - 2);
};

export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // count1 和 count2 修改 都会重新计算
  // const fib1 = fib(count1);

  // 仅在count1 修改时会计算
  const fib1 = useMemo(() => {
    return fib(count1);
  }, [count1]);

  console.log("组件重新渲染了");
  return (
    <div>
      <button onClick={() => setCount1(count1 + 1)}>change count1+1</button>
      <button onClick={() => setCount2(count2 + 1)}>change count2+1</button>
    </div>
  );
}