七、useMemo与useCallback的使用

useCallback和useMemo的参数跟useEffect一致，他们之间最大的区别有是useEffect会用于处理副作用，而前两个hooks不能。
useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回 缓存的变量，useCallback返回 缓存的函数。

useMemo

看一个反例：

import React ,{ useState } from 'react'

export default function WithMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('小明');
    function add() {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 10; i++) {
            sum += i;
        }
        return sum;
    }
 
    return (
        <div>
            <h4>{count}---{add()}</h4>
            {val}
            <div>
                <button onClick={() => setCount(count + 1)}>+1</button>
                <input value={val} onChange={event => setValue(event.target.value)}/>
            </div>
        </div>
    );
}

运行这个代码，我们会发现，无论我们点击按钮或者在输入框添加值，在后台都会打印出compute，然而add函数与val并无关系，这就造成了性能的损耗。我们要改成当我们只点击按钮时，add函数才调用。

使用useMemo:

import React ,{ useState, useMemo } from 'react'

export default function WithMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('小明');
    const add = useMemo(() => {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 10; i++) {
            sum += i;
        }
        return sum;
    },[count])
 
    return (
        <div>
            <h4>{count}-{add()}</h4>
            {val}
            <div>
                <button onClick={() => setCount(count + 1)}>+c1</button>
                <input value={val} onChange={event => setValue(event.target.value)}/>
            </div>
        </div>
    );
}

这是我们发现，只有当我们点击了按钮时，add函数才被调用，节省了性能的消耗。

useCallback

useCallback跟useMemo比较类似，但它返回的是缓存的函数。

const fnA = useCallback(fnB,[a])

上面的useCallback会将我们传递给它的函数fnB返回，并且将这个结果缓存；当依赖a变更时，会返回新的函数。既然返回的是函数，我们无法很好的判断返回的函数是否变更，所以我们可以借助ES6新增的数据类型Set来判断，具体如下：

import React, { useState, useCallback } from 'react';
 
const set = new Set();
 
export default function Callback() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        console.log(count);
    }, [count]);
    set.add(callback);
 
 
    return <div>
        <h4>{count}</h4>
        <h4>{set.size}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}

我们可以看到，每次修改count，set.size就会+1，这说明useCallback依赖变量count，count变更时会返回新的函数；而val变更时，set.size不会变，说明返回的是缓存的旧版本函数。