在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的语法糖
