在class的時代，我們一般是通過pureComponent來對數(shù)據(jù)進(jìn)行一次淺比較，引入Hook特性后，我們可以使用Memo進(jìn)行性能提升。
一下示例將解釋useMemo的作用：

import React, { ReactElement, useCallback, useState } from "react";

const Example = () => {
  const [n, setN] = useState<number>(0);
  const [m, setM] = useState<number>(10);
  console.log("執(zhí)行最外層盒子了");

  const addN = useCallback(() => {
    setN(n + 1);
  }, [n]);

  const addM = useCallback(() => {
    setM(m + 1);
  }, [m]);
  return (
    <div style={{ textAlign: "center", marginTop: 50 }}>
      最外層盒子
      <Child1 value={n} onClick={addN} />
      <Child2 value={m} onClick={addM} />
      <button onClick={addN}>n+1</button>
      <button onClick={addM}>m+1</button>
    </div>
  );
};

interface childProp {
  value: number;
  onClick?: () => void;
}

const Child1 = React.memo((props: childProp): ReactElement<childProp> => {
  console.log("執(zhí)行子組件1了");
  return <div>子組件1上的n：{props.value}</div>;
});

const Child2 = React.memo((props: childProp): ReactElement<childProp> => {
  console.log("執(zhí)行子組件2了");
  return <div>子組件2上的m：{props.value}</div>;
});

export default Example;

示例圖

執(zhí)行結(jié)果

總結(jié)：

• 使用memo可以幫助我們優(yōu)化性能，讓react不執(zhí)行沒必要的函數(shù)
• 由于復(fù)雜數(shù)據(jù)類型的地址可能發(fā)生改變，于是傳遞給子組件的props也會發(fā)生變化，這樣還是會執(zhí)行不必要的函數(shù)，所以就用到了useMemo這個api
• useCallback是useMemo的語法糖