useMemo 钩子函数

1、useMemo 钩子函数说明

useMemo 相当于备忘录，可以把高开销的计算使用 useMemo 进行托管备份计算数据。

2、useMemo 钩子函数例子

import { useMemo, useState } from "react";

const UseMemoDemo: React.FC = () => {
  const [number, setNumber] = useState<number>(0);
  const [dark, setDark] = useState<boolean>(true);
  const doubleNumber = useMemo(() => {
    return showFunction(number);
  }, [number]);
  const themeStyles = {
    backgroundColor: dark ? "black" : "white",
    color: dark ? "white" : "black",
  };

  function showFunction(num: number) {
    for (let i = 0; i < 100000000; i++) {}

    return num * 2;
  }

  return (
    <div>
      <input
        type="text"
        value={number}
        onChange={(e) => setNumber(+e.target.value)}
      />
      <button onClick={() => setDark(!dark)}>改变主题</button>
      <div style={themeStyles}>{doubleNumber}</div>
    </div>
  );
};

3、useMemo 钩子函数中的陷阱

3.1 useMemo 使用此钩子函数时需要考虑使用场景

在上面的例子中，当切换主题的时候会执行一个特别慢的一个函数，为了不让页面出现卡顿的情况，所以使用了 useMemo 函数来解决这个问题，但是使用了此函数后也会增加内存的消耗。因为 useMemo 在使用中会监听值的变化，当值发生变化时，则会在内存中备份一份return返回的值，这样多次运行后就会让内存不断的在增加，所以在使用此函数时需要进行衡量。

3.2 useMemo 返回的是对象或者数组的时候需要注意值对比

例如我们在上面的例子中使用 useEff 钩子来监听样式变化，当在输入对话框中输入值或者点击改变主题，useEffect 都会执行一次内部函数，具体代码如下：

useEffect(() => {
  console.log("123");
}, [themeStyles]);

当对样式使用 useMemo 钩子后，只有当点击改变主题时，useEffect 才会执行内部的函数，具体代码如下：

const themeStyles = useMemo(() => {
  return {
    backgroundColor: dark ? "black" : "white",
    color: dark ? "white" : "black",
  };
}, [dark]);

出现这种情况的原因主要是因为 useMemo 的备份是深拷贝对象，所以只有当对象内部值发生改变的时候，useEffect 才会监听到值的改变。