const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized值。这种优化有助于避免在每次渲染时都进行高开销的计算。

【使用场景】

• 缓存计算量大的函数的计算结果
• 缓存复杂的组件的实例

手写useMemo

const GlobalHookData = (() => {
  const HookIds = {};
  const current = {
    id: 0,
  };
  const generateId = () => {
    return current.id + 1;
  };
  return {
    HookIds,
    generateId,
  };
})();

export default GlobalHookData;

import { useState } from "react";
import useMyMemo from "../hooks/useMyMemo";

export default function TestHookMemo() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);
  const newValue = useMyMemo(() => {
    console.log("------执行一次---useMyMemo内函数");
    return `更新count` + count;
  }, [count]);
  console.log("newValue", newValue);
  return (
    <>
      count:{count}, num:{num}
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        ADD COUNT
      </button>
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        ADD NUM
      </button>
      <br />
      {newValue}
    </>
  );
}

仿写链接

codesandbox.io/p/sandbox/s…