官网文档：https://reactjs.org/docs/hooks-reference.html#usememo
传递一个创建函数和一个依赖数组，然后返回一个记忆化的值。当依赖发生变化的时候，useMemo 将重新计算记忆化值。这个优化可以帮助避免每次渲染的时候昂贵地计算。(所以说使用 useMemo 的前提是计算比较昂贵)
请记住，传递给 useMemo 的函数在呈现期间运行。不要做任何你在渲染时通常不会做的事情。例如，副作用属于 useEffect，而不是 useMemo。
如果没有提供数组，则在每次呈现时计算一个新值。
下面先贴上代码的例子：
import React, { useState, useMemo } from 'react';
const set = new Set();
function expensiveCalculate(num) {
console.log("expensive calculate");
return num.join("")
}
function App() {
const [num, setNum] = useState([1,2,3]);
const [num1, setNum1] = useState([4,5,6]);
const result = useMemo(() => expensiveCalculate(num));
return (
<>
<ChildrenApp num={num} num1={num1} result={result} />
<button onClick={() => setNum([7,8,9])} >change num</button>
<button onClick={() => setNum1([10,11,12])} >change num1</button>
</>
)
}
function ChildrenApp({num, num1, result}) {
set.add(result);
console.log(set);
return (
<div>
{num} - {num1} - {result}
</div>
)
}
export default App;
-
初始化的时候
-
点击 change num1
-
点击 change num
可以看出，依赖列表为空的时候，每次渲染都会重新计算。
下面我们修改依赖列表添加依赖：
const result = useMemo(() => expensiveCalculate(num), [num]);
-
初始化的时候
-
点击 change num1
- 点击 change num
从上面可以看出，当依赖列表中的依赖发生变化的时候，重新渲染的时候才会重新计算。
总结：
- 当计算比较昂贵的时候，可以考虑使用 useMemo。（上面的例子实际上计算并不昂贵，这里只是作为例子方便展示）
-
useMemo依赖列表为空的时候，每次渲染时都会重新计算。 -
useMemo依赖列表不为空的时候，当依赖发生变化时，重新渲染时会重新计算。
使用场景
- 避免子组件的昂贵渲染
下面我看看useMemo的一个使用场景，避免子组件的昂贵重新渲染（如果子组件渲染很昂贵的时候，我们可以这样优化）。
function Parent({ a, b }) {
// 只有 a 变化的时候 child1 才会重新渲染
const child1 = useMemo(() => <Child1 a={a} />, [a]);
// 只有 b 变化的时候 child2 才会重新渲染
const child2 = useMemo(() => <Child2 b={b} />, [b]);
return (
<>
{child1}
{child2}
</>
)
}
