开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14天，点击查看活动详情

三剑客之useCallBack

今天终于来到三剑客的最后一篇. useCallback是react中一个比较重要的hook,常用做函数缓存的.useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。 我们主要介绍一下它的用法: 基础语法:

const fnA = useCallback(fnB, [a])

useCallback的用法与useState的用法基本一致，但最后会返回一个函数，用一个变量保存起来。

返回的函数fnA会根据fnB的变化而变化，如果fnB始终未发生变化，fnA也不会重新生成，避免函数在不必要的情况下更新。

那我们在什么情况下需要使用到这个hooks呢? 第一种用法，有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。 如:

import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        return count;
    }, [count]);
    return <div>
        <h4>{count}</h4>
        <Child callback={callback}/>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}
 
function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}

不仅是上面的例子，所有依赖本地状态或props来创建函数，需要使用到缓存函数的地方，都是useCallback的应用场景。

tips:useEffect、useMemo、useCallback都是自带闭包的。也就是说，每一次组件的渲染，其都会捕获当前组件函数上下文中的状态(state, props)，所以每一次这三种hooks的执行，反映的也都是当前的状态，你无法使用它们来捕获上一次的状态。对于这种情况，我们应该使用ref来访问。