8 个很棒的 React Hooks

引用相等问题

React.js 是目前最受前端开发者欢迎的 JavaScript 库。它由 Facebook 发明，但作为开源项目，已被世界各地的开发者和企业广泛使用。

React 确实改变了我们构建单页应用的方式——它最强大的功能之一就是 hooks。Hooks 不久前才被引入，它使我们能够在处理状态时使用函数式组件而非基于类的组件。除了内置 hooks 之外，React 还提供了自定义 hooks 的方法。

以下是我最喜欢的一些自定义钩子及其实现的示例，您也可以在应用程序和项目中使用它们。

useTimeout - React Hook

利用这个 hook，我们可以使用声明式方法实现 setTimeout。首先，我们创建一个带有回调和延迟的自定义 hook。然后，我们使用 useRef hook 为回调函数创建一个 ref。最后，我们使用 useEffect 两次。一次用于记住上一次回调，一次用于设置超时并进行清理。

该示例展示了计时器的实现：

usePrevious - React Hook

这是另一个很棒的自定义 hook，我们可以在应用中使用它。有了它，我们可以存储 props 或之前的状态。首先，我们创建一个接受值的自定义 hook。然后，我们使用 useRef hook 为该值创建一个 ref。最后，我们使用 useEffect 来记住最新的值。

该示例展示了计数器的实现。

useClickInside - React Hook

如果您需要处理包装组件内部的点击事件，那么 useClickInside hook 是您的正确选择。首先，我们创建一个自定义 hook，它接受一个 ref 和一个回调来处理点击事件。然后，我们使用 useEffect 来附加和清理点击事件。最后，我们使用 useRef 为要点击的组件创建一个 ref，并将其传递给 useClickInside hook。

useClickOutside - React Hook

useClickOutside hook 与 useClickInside hook 非常相似，但它处理的是包装组件外部的点击事件，而不是内部的点击事件。因此，我们再次创建一个自定义 hook，它接受一个 ref 和一个回调来处理点击事件。然后，我们使用 useEffect 来附加和清理点击事件。最后，我们使用 useRef 为组件创建一个 ref，并将其传递给 useClickOutside hook。

useFetch - React Hook

useFetch hook 可用于以声明式方式实现 fetch。首先，我们使用 useState 初始化响应和错误状态变量。然后，我们使用 useEffect 异步调用 fetch 并更新状态。最后，返回一个包含响应/错误变量的对象。
该示例展示了一种从《星球大战》 API 中获取角色并渲染其名称的方法：

useInterval - React Hook

如果您想以声明的方式实现 setInterval，您可以使用这个名为 useInterval 的钩子。

首先，我们必须创建一个自定义钩子，接收一个回调和一个延迟。然后，我们使用 useRef 为该回调创建一个 ref。最后，我们使用 useEffect 来记住最新的回调，并设置间隔和清理操作。
该示例展示了一个自定义 ResourceCounter 的实现，例如，它可以在浏览器游戏中使用。

useComponentDidMount - React Hook

这个钩子是一个小例子，展示了如何在组件挂载后立即执行回调。对于第二个参数，我们只需使用 useEffect 并传入一个空数组，即可在组件挂载后立即执行一次提供的回调。

useComponentWillUnmount - React Hook

useComponentWillUnmount 与上面的示例类似，但会在组件卸载后立即执行回调。因此，我们再次使用 useEffect 函数，并以空数组作为第二个参数，在组件卸载之前执行提供的回调。

这些是我最喜欢的一些自定义 React hooks 示例，您可以在应用程序中使用它们。

如果您正在寻找灵感和前端项目，请查看我的网站！

如果您喜欢我写的内容并希望支持我和我的工作，请在Twitter上关注我，以了解有关编程、制作、写作和职业的更多信息🥰