简介
use-callback-ref 是一个 React Hooks，它可以帮助你获取一个回调函数和它对应的引用，这个引用在函数每次被调用时都会是最新的。
如果你在 React 组件中遇到过需要传递回调函数但同时又需要获取它的引用的场景，那么 use-callback-ref 可能是你需要的。例如，你需要使用 setInterval 并在组件卸载时清除，那么你就需要将 clearInterval 函数作为回调函数在 useEffect 中注册，并且在卸载时调用它。
传递回调函数可以使用 useCallback，获取引用可以使用 useRef，但是使用这两个 Hooks 进行结合的代码常常很冗长。use-callback-ref 正是为了解决这个问题而生的。
安装
使用 npm 安装：
--- ------- ----------------
或者，使用 yarn 安装：
---- --- ----------------
使用教程
使用 use-callback-ref 通常只需要传入一个回调函数即可。
------ - -------------- - ---- -------------------
-------- ------------- -
----- ------------- --------------- - -----------------
------------ -- -
----- -- - -------------- -- -
------------------- ---------
-- ------
----------------- -- -
------------------
--------------------- -----------
---
------ -- -- ------------------
-- ------------------
------ ------- ----------------
-在上面的代码中，我们创建了一个 setInterval，并将它的 ID 存储在 id 变量中。我们将一个回调函数作为参数传入 setCallbackRef 中。这个回调函数会在组件卸载时被调用，并且会清除 setInterval。
注意，在 useEffect 中我们还需要返回一个清除函数，防止内存泄漏。这个函数也会清除 setInterval。
参数说明
useCallbackRef 支持两个参数，都是可选的。
initialValue?: T | undefined
这个参数可以用于给回调函数一个初始值。通常这个参数不需要使用。
isDeepEqual?: (a: T, b: T) => boolean
这个参数用于设置是否使用深度比较。如果传入 true，那么 use-callback-ref 会使用 lodash.isequal 进行深度比较。默认情况下使用浅比较。
总结
use-callback-ref 是一个非常便利的 Hooks，它可以简化组件中需要获取回调函数和它对应的引用的代码。如果你遇到了这样的场景，那么这个包可能会帮助到你。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaaecb5cbfe1ea06105d4