React-hooks: useCallback

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。

const cachedFn = useCallback(fn, dependencies)

参数

• fn：想要缓存的函数。此函数可以接受任何参数并且返回任何值。React将会在初次渲染而非调用时返回该函数。当进行下一次渲染时，如果 dependencies 相比于上一次渲染时没有改变，那么React将会返回相同的函数。否则，React将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。React不会调用此函数，而是返回此函数。你可以自己决定何时调用以及是否调用。
• dependences ：有关是否更新fn的所有响应式值 的一个列表。响应式值包括props、state，和所有在你组件内部直接声明的变量和函数。如果你的代码检查工具配置了React，那么它将校验每一个正确指定为依赖的响应式值。依赖列表必须具有确切数量的项，并且必须像[dep1, dep2, dep3]这样编写。React使用 Object.is 比较每一个依赖和它的之前的值。

返回值

在初次渲染时，useCallback 返回你已经传入的 fn 函数；
在之后的渲染中，如果依赖没有改变，useCallback 返回上一次渲染中缓存的 fn 函数；否则返回这一次渲染传入的 fn。

示例

import { useCallback,memo, useState } from "react";

// memo 缓存Child组件，只有 props 发生改变时，才会重新渲染
const Child = memo(function ({onClick}) {
    console.log('子组件重新渲染了');

    return (
        <button onClick={onClick}>子组件</button>
    )
})

export default function App() {
    const [count, setCount] = useState(1);

    function handleUpdate() {
        setCount(count + 1);
    }

    // useCallback 缓存handleClick函数，只有后边依赖项变更时，才会返回新函数 
    const handleClick = useCallback(function () {
        console.log('点击了子组件更新');
    }, []);

    return (
        <>
            <div>当前值：{count}</div>
            <button onClick={handleUpdate}>变更值</button>
            <br />
            <Child onClick={handleClick}/>
        </>
    )   
}