[React Hooks] useMemo 学习

官网文档：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

从上面可以看出，当依赖列表中的依赖发生变化的时候，重新渲染的时候才会重新计算。

---

总结：

1. 当计算比较昂贵的时候，可以考虑使用 useMemo。（上面的例子实际上计算并不昂贵，这里只是作为例子方便展示）
2. useMemo 依赖列表为空的时候，每次渲染时都会重新计算。
3. 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}
    </>
  )
}