一、概念

useMemo 是 React 中的一个钩子，它可以帮助你避免在不必要的情况下重新渲染组件。它通过对比当前状态和前一个状态，决定是否重新计算或记忆一个值。

接收两个参数，第一个参数是个函数，第二个是依赖项。返回一个****memoized值，只有当它的某个依赖项改变时才重新计算 memoized 值，初始化的时候也会调用一次，这种优化有助于避免在每次渲染时都进行高开销的计算

import React, { useState, useMemo } from 'react';export default function hook() {const [count, setCount] = useState(1)const [total, setTotal] = useState(1)const memoizedValue = useMemo(() => {console.log("只有total变了我才会变")// 返回的值是total+1return total + 1}, [total]);return (<div><button onClick={() => setCount(count + 1)}>count + 1</button><button onClick={() => setTotal(total + 1)}>total + 1</button><div>count is {count}</div><div>total is {total}</div><div>memoizedValue is {memoizedValue}</div></div>)
}

二、useMemo和useCallback的区别

一句话来解释，useMemo是缓存值的，useCallback是缓存函数的

三、使用场景

1、数据过滤

如果你需要在组件中过滤大量数据，并且数据不需要频繁更新，那么可以使用 useMemo 将过滤结果缓存，避免不必要的重新计算。

2、计算值

如果你需要在组件中计算某些值，并且这些值不需要频繁更新，那么可以使用 useMemo 将这些值缓存，避免不必要的重新计算。

3、预处理

如果你需要在组件中进行复杂的预处理，并且预处理结果不需要频繁更新，那么可以使用 useMemo 将预处理结果缓存，避免不必要的重新计算

4、总结

因此，如果你在组件中执行了复杂的计算，并且这些计算结果不需要频繁更新，那么可以考虑使用 useMemo 优化组件性能