1，介绍
一句话总结，效果类似 Vue 中的 computed。常用于性能优化。
和 useCallback 的区别
使用上没有区别，同样如果依赖项没有发生变化，第1个参数不会再次执行。
useMemo会将第1个参数的返回值缓存起来。useCallback会将第1个参数的引用值缓存起来。
一般来说，useMemo 用于缓存值。而 useCallback 用户缓存函数。
useMemo也可以用于缓存函数，只是不常用。
2，使用举例
2.1，优化子组件渲染1
对 上篇文章 的例子来说，可以优化为：
const handleClick = useCallback(() => {
setTxt(Math.random());
}, [txt]);
// 改造为
const handleClick = useMemo(() => {
return () => {
setTxt(Math.random());
};
}, [txt]);
2.2，优化子组件渲染2
import React, { useState } from "react";
function Child(props) {
return <li>{props.item}</li>;
}
export default function App() {
const [range, setRange] = useState({
min: 0,
max: 10000,
});
const [n, setN] = useState(0);
const list = [];
for (let i = range.min; i < range.max; i++) {
list.push(<Child item={i} key={i}></Child>);
}
return (
<>
{list}
<input
type="number"
value={n}
onChange={(e) => {
setN(e.target.value);
}}
/>
</>
);
}
可以看到，不做优化前，每次改变状态变量 n，都会触发子组件渲染。而且子组件的渲染开销很大。
优化父组件：
export default function App() {
// ...
const list = useMemo(() => {
const list = [];
for (let i = range.min; i < range.max; i++) {
list.push(<Child item={i} key={i}></Child>);
}
return list;
}, [range.min, range.max]);
// ...
}
注意和上个文章中例子的区别，那个例子的子组件是类组件，有
PureComponent来优化组件执行的问题。
对函数组件来说，如果 React 元素本身的引用没有发生变化，同样也不会再次渲染。
以上。
