useMemo、useCallback使用

在class的时代，我们一般是通过pureComponent来对数据进行一次浅比较，引入Hook特性后，我们可以使用Memo进行性能提升。
一下示例将解释useMemo的作用：

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

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

  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("执行子组件1了");
  return <div>子组件1上的n：{props.value}</div>;
});

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

export default Example;

总结：

• 使用memo可以帮助我们优化性能，让react不执行没必要的函数
• 由于复杂数据类型的地址可能发生改变，于是传递给子组件的props也会发生变化，这样还是会执行不必要的函数，所以就用到了useMemo这个api
• useCallback是useMemo的语法糖