useMemo & useCallBack
在 React 中，当父组件发生变化的时候，子组件会重新渲染一遍，但是在子组件中，有些事件我们并不想让它执行
在 class component 中有 shouldComponentUpdate 中可以进行一个判断
在 function component 中，可以用 useMemo 和 useCallback
这两个 hooks 解决的是一个重复渲染的问题
useCallback 和 useMemo 的参数跟 useEffect 一致，他们之间最大的区别是 useEffect 会用于处理副作用，而前两个 hooks不能
useCallback 和 useMemo 的区别在于，useCallback 返回一个 function，useMemo 返回一个 value
换句话说，useCallback 和 useMemo 可以做一个缓存，前者缓存一个引用，后者缓存一个值
也就是 useCallback(fn, deps) 和 useMemo(() => fn, deps) 是等价的
关于用法
useCallback
const memorizedCallback = useCallback(
() => {
doSomething(a, b)
},
[a, b]
);
当 [a. b] 不变的时候 memorizedCallback 的引用不变，即 useCallback 的第一个入参函数会被缓存，从而达到性能优化的目的
useMemo
const memorizedValue = useMemo(() => computedExpensiveValue(a, b), [a, b]);
当 [a, b] 不变的时候 memorizedValue 的值不变，即 useMemo 的第一个入参函数不会执行，从而达到节省计算量的目的
React.memo
React.memo 是一个高阶组件，功能类似于 React.PureComponent
默认情况下，memo 会对复杂的对象做一个浅层的对比，如果想要控制对比过程，可以将自定义比较的函数通过第二个参数传入来实现
function MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
...
*/
}
export default React.memo(MyComponent, areEqual);
注意：React.memo 比较的是 props，shouldComponentUpdate 比较的是 state 和 props
