React 的 useMemo Hook 用于在函数组件中进行记忆化计算，它可以缓存一些需要耗时计算的值，以避免无谓的重复计算。
useMemo 接收一个回调函数和一个依赖数组作为参数。
import { useMemo } from 'react';
const memoizedValue = useMemo(() => {
// 计算和返回一个值
return value;
}, [依赖数组]);
回调函数用于进行一些复杂或耗时的计算，计算结果将被缓存起来。如果依赖数组发生变化，将重新执行回调函数并更新缓存的值。
缓存的值可以在组件的渲染周期内被多次使用，而不需要每次重新计算。
以下是一些使用 useMemo 的示例：
-
计算衍生的数据：在依赖项发生变化时重新计算衍生的数据。
import { useMemo } from 'react';
function MyComponent({ a, b }) {
const sum = useMemo(() => {
console.log('Sum computed');
return a + b;
}, [a, b]);return
{sum};
}
在这个例子中，当 a 或 b 发生变化时，sum 将被重新计算。否则，它将从缓存中读取上一次计算的结果。
-
优化性能：避免重复的计算。
import { useMemo } from 'react';
function MyComponent({ list }) {
const sortedList = useMemo(() => {
console.log('Sorting list');
return list.sort();
}, [list]);return
{sortedList};
}
在这个例子中，当 list 发生变化时，sortedList 将被重新计算并排序。否则，它将从缓存中读取上一次计算的结果。
通过使用 useMemo Hook，我们可以在函数组件中缓存计算结果，以提高性能和避免不必要的重复计算。这在处理大型数据集或复杂计算时特别有用。
例子：
// useMemo 是 React 提供的一个钩子函数，用于在函数组件中进行性能优化。它的作用是对计算结果进行缓存，只有在依赖的值发生改变时才重新计算。
// 在某些情况下，组件内部的计算可能会比较耗时，而且计算结果并不会频繁变化。
// 这时就可以使用 useMemo 来缓存计算结果，避免不必要的重复计算，提高组件的性能。
// useMemo 接收两个参数：一个回调函数和一个依赖数组。回调函数用于计算需要缓存的值，依赖数组则用于指定哪些变量的变化会触发重新计算。
// 只有当依赖数组中的值发生改变时，才会重新计算并返回新的值。、
// 类似于vue中的computed，但是它是纯函数，不会有副作用。
import React, { useMemo, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
const expensiveOperation = useMemo(() => {
console.log('Calculating...');
let result = 0;
for (let i = 0; i < count; i++) {
result += i;
}
return result;
}, [count]);
return (
<div>
<p>Count: {count}</p>
<p>Result of Expensive Operation: {expensiveOperation}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Example;
// 在上面的例子中，我们定义了一个 expensiveOperation 的计算操作，并使用了 useMemo 将其结果缓存起来。只有当 count 发生变化时，才重新进行计算。
//
// 需要注意的是，useMemo 的缓存只对当前组件实例有效，不会在不同组件实例之间共享，
// 所以它只对当前组件内的数据共享和性能优化有效。
//
// 使用 useMemo 可以避免不必要的计算，提高组件的渲染性能。但是在大多数情况下，
// 仅当计算确实非常耗时时，才需要使用 useMemo 进行性能优化。在大多数情况下，组件的重渲染并不会带来明显的性能问题。