useCallback文档
https://react.docschina.org/reference/react/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}/></>)
}
