React—useMemo与useCallback

看到“memo”这个字眼，很多人应该会想到memo方法。这是一个高阶函数，它会返回一个函数组件，作用相当于PureComponent。

而useMemo的作用也有点像，只不过它不是作用在函数组件上，而是在一段逻辑上，例如：

const [count, setCount] = useState(0);

const doubleCount = useMemo(() => {
    return 2 * count;
}, [count]);

useMemo的用法与useEffect非常相似，如果第二个参数为空则函数组件每次被渲染，useMemo内的逻辑都会被执行。如果第二个参数为一个空数组，那么仅会在组件第一次被渲染时执行。其他的情况都是在数组内元素完全相同时才不执行。

那么上面代码中的doubleCount是依赖count计算出来的，那么很显然当count没有发生变化，doubleCount计算出的结果也不会变化，因此也就没有必要重复计算，这就是useMemo最主要的作用，就是性能优化的手段。

在上面的代码中，useMemo内的计算依赖于count，因此需要把count添加到第二个参数中。理论上所有useMemo内依赖的变量都一个添加到第二个参数中。

需要注意的是，useMemo尽管看起来跟useEffect用法很像，但是useEffect是执行在渲染完成后，而useMemo则是在渲染期间执行的，所以useMemo中不要执行一些有副作用的操作。

---

给子组件传递回调函数时，会出现因为每次传递给子组件的回调函数的句柄不同（逻辑相同）而出现的不必要的渲染。因此我们希望能够传递给子组件句柄相同的回调函数。那么就可以用到useMemo了：

const callback useMemo(()=>{
    return () => {
        console.log('this is a callback');
    }
}, [])

而useCallback就可以理解为一个语法糖，它省略了return：

const callback useCallback(()=>{
    console.log('this is a callback');
}, [])