useMemo

useMemo：根据名字翻译为"备忘录"，他在react的hooks中发挥什么样的作用呢？
先根据查找到的资料，发现它的用法同useEffect很像，也是接受第二个参数作为判断是否执行useMemo的依赖项。
其实它是解决这样的一个场景中的问题，先看代码：

import { useState, useMemo} from "react";
import * as ReactDOM from "react-dom";
// 产品名称列表
const nameList = ['apple', 'peer', 'banana', 'lemon']
function App() {
  // 产品名称、价格
  const [price, setPrice] = useState(0)
  const [name, setName] = useState('apple')
  // 假设有一个业务函数  获取产品的名字
  function getProductName() {
    console.log('getProductName触发')
    return name
  }
  return (
    <>
      <p>{price}</p>
      <p>{getProductName()}</p>
      <button onClick={() => setPrice(price+1)}>价钱+1</button>
      <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
    </>
  )
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

微信截图_20211207172607.png

在这个示例中，getProductName算作是一个子组件，从内部可以看到它只是使用到了name，因此可以认为它只需要在name发生变更的时候执行，其他的状态和它无关。特别的，如果getProductName中是一个开销非常大的计算，那么其他状态的变更不应该触发它，否则就是一种浪费。

那么这个问题该如何解决呢？似乎好像一下子想到了useEffect，它可以以第二个数组参数作为依赖，只在依赖项发生变更的时候才执行。但是突然又想到，useEffect的使用语法似乎并不适合这里的getProductName函数，因为useEffect内部如果将getProductName返回，尚不清楚返回的还是不是getProductName函数本身，带着这个问题，我们测试看看useEffect方法返回的是什么东西。

 const test = useEffect(()=>{
    function getProductName() {
      console.log('getProductName触发')
      return name
    }
    return getProductName

  }, [name])
  console.log(test)

image.png

可以看到，将useEffect赋给一个变量且内部返回一个函数，但useEffect函数并不返回任何数据（test是undefined）。因此，使用useEffect的想法失败。
这个时候让咱们来尝试useMemo吧！

import { useState, useMemo, useEffect} from "react";
import * as ReactDOM from "react-dom";
// 产品名称列表
const nameList = ['apple', 'peer', 'banana', 'lemon']
function App() {
  // 产品名称、价格
  const [price, setPrice] = useState(0)
  const [name, setName] = useState('apple')

  // 假设有一个业务函数  获取产品的名字
  const memo_getProductName = useMemo(()=>{
    console.log('getProductName触发')
    return name
  }, [name])
  console.log(memo_getProductName)
  
  return (
    <>
      <p>{price}</p>
      <p>{memo_getProductName}</p>
      <button onClick={() => setPrice(price+1)}>价钱+1</button>
      <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
    </>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

image.png

可以看到useMemo生效了，当我点击价格按钮，只是价格变动，memo_getProductName内部并没有执行。
同时发现初始进入页面的时候useMemo也是会执行一次的，这和useEffect保持了一致，也就是相当于在componentDidMount的生命周期会执行。

由此可得出这个结论：useMemo 返回一个 memoized 值，在依赖参数不变的的情况返回的是上次第一次计算的值，当依赖参数发生变化时useMemo就会自动重新计算返回一个新的 memoized值。
用自己的理解就是：useMemo基本上同useEffect起到一样的作用，只根据依赖项数组中的状态是否发生变更来判断自己是否需要执行，只是useMemo的执行可返回一个具体的结果供其他地方使用。

当然，useMemo并不一定需要在内部返回一个什么，也可以是纯粹的在useMemo中写一些逻辑。以下是antd-design中upload组件有一段使用到了useMemo的代码。

  // Control mode will auto fill file uid if not provided
  React.useMemo(() => {
    const timestamp = Date.now();

    (fileList || []).forEach((file, index) => {
      if (!file.uid && !Object.isFrozen(file)) {
        file.uid = `__AUTO__${timestamp}_${index}__`;
      }
    });
  }, [fileList]);

只要fileList发生变更，useMemo内部就会执行，useMemo并不需要将自己赋给谁去调用，这个时候和useEffect是完全一样的作用。

与useEffect？

如上所述useMemo与useEffect的区别好像并不大，那我是否可以随意混用？带着这个问题，且看官网的一段描述：

记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。
你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。

这说的什么意思？意思是大多数时候其实并不需要使用到useMemo，除非真的需要做性能优化才考虑到它。
那么说的“会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作”该如何理解？来写个例子看看。

import { useState, useMemo, useEffect } from "react";
import * as ReactDOM from "react-dom";
// 产品名称列表
const nameList = ["apple", "peer", "banana", "lemon"];
function App() {
  // 产品名称、价格
  const [price, setPrice] = useState(0);
  const [name, setName] = useState("apple");

  // 假设有一个业务函数  获取产品的名字
  useMemo(() => {
    setName(nameList[(Math.random() * nameList.length) << 0])
  });

  return (
    <>
      <p>{price}</p>
      <p>{name}</p>
      <button onClick={() => setPrice(price + 1)}>价钱+1</button>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

image.png

我在useMemo中使用尝试使用setState改变一个状态的值，但编辑器自动提示陷入死循环，也就是说，useMemo会在组件渲染的时刻执行，因为初始进入页面useMemo会执行一次，所以name就会被变更，随着name的变更，页面重新渲染，useMemo在这次渲染中又执行，name又被变更...这样就陷入了死循环。
但是当我在依赖数组中加入price的时候就不会陷入死循环：

  // 假设有一个业务函数  获取产品的名字
  useMemo(() => {
    setName(nameList[(Math.random() * nameList.length) << 0])
  }, [price]);

原因是，在这里的useMemo中只是触发name的变更，加上了price的依赖后排除了name引起的useMemo执行。但这么写其实并没有什么意义，不如直接使用useEffect更直接（当然，useEffect如果在不设依赖项的情况下也不应该setState，否则也会陷入死循环）。
因此还是官网推荐的：除非非有必要使用useMemo来做性能优化才去选择它。

我自己感觉useMemo有点像vue中的computed。

完。