React hooks——useMemo

一、简介

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

1.1 基本用法

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

• 第一个参数：计算函数，返回需要记忆的值

• 第二个参数：依赖项数组，只有当依赖项发生变化时，才会重新计算值

1.2 主要特点

1. 性能优化：避免在每次渲染时都执行昂贵的计算

2. 引用稳定性：当依赖项未变化时，返回相同的引用，有助于避免子组件不必要的重新渲染

3. 与 useEffect 的区别：

   • useMemo 在渲染期间执行

   • useEffect 在渲染完成后执行

二、代码实现

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>);
}