前言
useMemo() 是 React 中的一个 hook,用于缓存计算结果以提高性能。
用法
接收两个参数:一个函数
和一个依赖数组
。
当依赖数组中的值发生变化时,useMemo() 函数会重新计算并返回新的值;当依赖数组中的值未发生变化时,useMemo() 函数会直接返回缓存的值,不会重新计算
。
用法示例:
import React, { useMemo } from 'react';
function MyComponent(props) {
const { a, b } = props;
// 计算 a + b 的值,并将结果缓存
const sum = useMemo(() => {
console.log('计算 sum');
return a + b;
}, [a, b]);
return (
<div>
<p>{a} + {b} = {sum}</p>
</div>
);
}
在这个例子中,useMemo() 缓存了计算 a + b 的结果,只有在 a 或 b 改变时才会重新计算
。这样可以减少不必要的计算,提高组件性能。