useMemo
是 React 的一个 Hook,用来优化性能,尤其是在计算复杂值时。它会记住(缓存)计算结果,只有在依赖项变化时才重新计算,避免不必要的重复计算。
import React, { useMemo } from 'react';
function Example({ num }) {
// 使用 useMemo 来缓存计算结果
const expensiveComputation = useMemo(() => {
console.log('Performing expensive computation...');
return num * 2;
}, [num]); // 只有 num 改变时才重新计算
return (
<div>
<p>Expensive Computation Result: {expensiveComputation}</p>
</div>
);
}
export default Example;
解释
注意事项
-
useMemo
接受两个参数:- 一个返回值的函数,用于计算你想要缓存的值(在上面的例子中是
num * 2
)。 - 一个依赖项数组,只有当数组中的值变化时,
useMemo
才会重新计算缓存的值(在上面的例子中是num
)。
- 一个返回值的函数,用于计算你想要缓存的值(在上面的例子中是
-
注意:
useMemo
只是在依赖项变化时重新计算,其他时候返回缓存的值。它并不会保证组件渲染时总是返回缓存值。React 本身会判断是否需要重新计算。
二、useMemo
可以帮助避免在每次渲染时重复执行昂贵的计算,尤其是那些需要大量计算的复杂数据处理、排序、过滤等操作。 -
import React, { useMemo, useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const [num, setNum] = useState(1);// 假设这个计算非常昂贵
const expensiveValue = useMemo(() => {
console.log('Computing expensive value...');
return num * 1000;
}, [num]); // 只有 num 改变时,才会重新计算return (
<div>
<p>Count: {count}</p>
<p>Expensive Computed Value: {expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
<button onClick={() => setNum(num + 1)}>Change Num</button>
</div>
);
}export default App;
使用场景
-
避免不必要的渲染:当你有一些高计算的任务或者处理复杂数据时(如排序、过滤、图表计算等),使用
useMemo
可以避免这些操作每次渲染时都执行。 -
优化子组件渲染:当父组件渲染时,如果传递给子组件的 prop 通过
useMemo
缓存,只要依赖项不变,子组件就不会重新渲染。 - 不要过度使用:
useMemo
适用于性能瓶颈场景,但不应过度使用。对于简单的计算,React 本身已经足够优化,因此如果没有实际性能问题,过度使用useMemo
反而可能会增加复杂度。 - 依赖项管理:记得正确设置依赖项数组。如果依赖项没有正确更新,可能会导致渲染中的数据不一致问题。
- 有些类似于vue中的computed计算属性,会缓存计算结果