【译】值得推荐的十大React Hook 库 (2)

用法示例：

import React from "react"; import { useForm } from "react-hook-form"; function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { // logs {firstName:"exampleFirstName", lastName:"exampleLastName"} console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input ref={register} /> <input ref={register({ required: true })} /> {errors.lastName && <span>"Last name is a required field."</span>} <input ref={register({ required: true })} /> {errors.age && <span>"Please enter number for age."</span>} <input type="submit" /> </form> ); } 6. useDebounce

useDebounce表示一个用于防抖的小钩子。它用于将功能的执行推迟到以后。常用于获取数据的输入框和表格中。

用法示例：

import React, { useState } from "react"; import { useDebounce } from "use-debounce"; export default function Input() { const [text, setText] = useState("Hello"); const [value] = useDebounce(text, 1000); return ( <div> <input defaultValue={"Hello"} onChange={(e) => { setText(e.target.value); }} /> <p>Value: {text}</p> <p>Debounced value: {value}</p> </div> ); } 7. useLocalStorage

useLocalStorage是一个小钩子，与上面的钩子一样。它对于在localStorage中提取和设置数据非常有用。使用它之后操作变得很容易。

提供自动JSON序列化和同步的功能

文档以高质量的方式编写，并且通过扩展示例可以完全理解。

用法示例：

import React, { useState } from "react"; import { writeStorage } from '@rehooks/local-storage'; export default function Example() { let counter = 0; const [counterValue] = useLocalStorage('counterValue'); return ( <div> <span>{counterValue}</span> <button onClick={() => writeStorage('i', ++counter)}> Click Me </button> </div> ); } 8. usePortal

usePortal使得创建下拉菜单，弹出层，通知弹出窗口，提示等变得非常容易！它提供了在应用程序的DOM层次结构之外创建元素的功能。

它还提供了门户样式和大量其他选项的完全定制。

编写的文档非常好，其中展示了许多示例，这些示例足够用于开始使用库/自己做钩子。

用法示例：

import React, { useState } from "react"; import usePortal from "react-useportal"; const Example = () => { const { ref, openPortal, closePortal, isOpen, Portal } = usePortal() return ( <> <button ref={ref} onClick={() => openPortal()}> Open Portal </button> {isOpen && ( <Portal> <p> This Portal handles its own state.{' '} <button onClick={closePortal}>Close me!</button>, hit ESC or click outside of me. </p> </Portal> )} </> ) } 9. useHover

它确定是否正在处于hover的React元素。简单易用。该库很小，易于使用，但如果您有足够的创造力，它可能会很强大。

它还提供了悬停效果的延迟功能。支持TypeScript。虽然文档没有那么详细，但是它将向您展示如何正确地使用它。

用法示例：

import useHover from "react-use-hover"; const Example = () => { const [isHovering, hoverProps] = useHover(); return ( <> <span {...hoverProps} aria-describedby="overlay">Hover me</span> {isHovering ? <div> I’m a little tooltip! </div> : null} </> ); } 10. React router hooks

React router 是React最受欢迎的库之一。它用于路由和获取应用程序URL历史记录等。它与Redux一起实现了用于获取此类有用的数据

提供的挂钩有：

useHistory

useLocation

useParams

useRouteMatch

它的名字很不言自明。UseHistory将获取应用程序历史记录和方法的数据，例如push一个new route。UseLocation将返回代表当前URL的对象。UseParams将返回当前URL的参数的键-值对的对象。最后，useRouteMatch将尝试将当前URL与给定URL进行匹配，给定URL可以是字符串，也可以是具有不同选项的对象。

文档很好，写了很多例子

用法示例：

import { useHistory, useLocation, useRouteMatch } from "react-router-dom"; const Example = () => { let history = useHistory(); let location = useLoction(); let isMatchingURL = useRouteMatch("/post/11"); function handleClick() { history.push("/home"); } return ( <div> <span>Current URL: {location.pathname}</span> {isMatchingURL ? <span>Matching provided URL! Yay! </span> : null} <button type="button" onClick={handleClick}> Go home </button> </div> ); }

还有更多的钩子库，但是这些是我决定要谈论的。请尝试一下，我保证您不会后悔。如果您确实很喜欢它们，请以任何方式去支持他们。hooks仍然是执行此操作的一种相对较新的方法。在接下来的几个月中，我们希望有更多出色的库和钩子示例浮出水面。

希望您发现这篇文章有趣，并且您学到了一些新东西。在进一步探索hooks中玩得开心！发展愉快。

公众号：《前端阳光》 后台回复加群，欢迎和大佬们交流技术