useMemo 钩子函数

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 才会监听到值的改变。

你可能感兴趣的:(React,前端,react)