Hooks - useMemo & useCallBack & React.memo

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

Hooks - useMemo & useCallBack & React.memo

useMemo & useCallBack

推荐阅读更多精彩内容