- 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065
- 原文做者:Juraj Pavlović
- 译者:培歌行(阳光是sunny)
React Hook来了,并在暴风雨中占领了React社区。自最初发布以来已经有一段时间了,这意味着有不少支持库。在搜索与React相关的内容时,很难不看到“ hook”这个词语。若是你尚未遇到的话,应该尽快将它们加入代码库学习起来。它们将使您的编码生活变得更加轻松和愉快。前端
在React开发中,保持干净的代码风格,可读性,可维护性,更少的代码行以及可重用性相当重要。该博客将向您展现应当被当即开始使用的十大React Hook库。不用再拖延了,让咱们开始吧。react
use-http
是一个很是有用的库,可用来替代Fetch API。它使您的编码更简单易懂,更精确地讲是数据操做部分。use-http
自己使用TypeScript,甚至支持SSR和GraphQL。它返回响应,加载,错误数据和不一样的请求方法,例如Get,Post,Put,Patch和Delete。typescript
CodeSandbox示例和Youtube视频以及GitHub自述文件都对此进行了很好的记录。redux
用法示例:缓存
import useFetch from "use-http" const Example = () => { const [todos, setTodos] = useState([]) const { get, post, response, loading, error } = useFetch("https://example.com") useEffect(() => { get("/todos") }, []) const addTodo = async () => { await post("/todos", { title: "example todo" }); if (response.ok) setTodos([...todos, newTodo]) } return ( <> <button onClick={addTodo}>Add Todo</button> {error && 'Error!'} {loading && 'Loading...'} {todos.map(todo => ( <span key={todo.id}>{todo.title}</span> )} </> ); };
您是否须要一种跟踪CSS媒体查询的方法?useMedia提供一个简单的方法解决这个问题。这是一个可以准确跟踪的感官钩子。在任何应用程序或网站上,媒体查询以及响应能力都很是重要。react-router
它以TypeScript编写。该软件包具备定义明确的文档,它的用法以及测试方法也解释的很是好。dom
用法示例:async
import useMedia from 'use-media'; const Example = () => { const isWide = useMedia({minWidth: '1000px'}); return ( <span> Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"} </span> ); };
Constate可将本地状态提高到React Context。这意味着能够以最小的努力轻松地将任何组件的任何状态提高到上下文。若是您想在多个位置使用相同的状态,或者为多个组件提供相同的状态,这颇有用。该名称来自合并Context和state。
它是基于typescript实现的,并且库很是的小。虽然该文档不是很详细,可是看例子,咱们就能够轻易地学会使用。ide
用法示例:工具
import React, { useState } from "react"; import constate from "constate"; // custom hook function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount(prevCount => prevCount + 1); return { count, increment }; } // hook passed in constate const [CounterProvider, useCounterContext] = constate(useCounter); function Button() { // use the context const { increment } = useCounterContext(); return <button onClick={increment}>+</button>; } function Count() { // use the context const { count } = useCounterContext(); return <span>{count}</span>; } function App() { // wrap the component with provider return ( <CounterProvider> <Count /> <Button /> </CounterProvider> );
Redux是许多(即便不是所有)React开发人员的知名工具。在整个应用程序中,它用做全局状态管理器。在React的最第一版本发布几个月后,它就随hooks而出现了。它经过利用现有的connect()方法 提供了 一种 替代HOC(高阶组件)模式的方法。
提供的最著名的挂钩是:
该文档很是好,虽然有点复杂,可是它将为您提供开始使用它们所需的任何信息。
用法示例:
import {useSelector, useDispatch} from "react-redux"; import * as actions from "./actions"; const Example = () => { const dispatch = useDispatch() const counter = useSelector(state => state.counter) return ( <div> <span> {counter.value} </span> <button onClick={() => dispatch(actions.incrementCounter)}> Counter +1 </button> </div> ); };
React hook form
是一个表单钩子库,相似于Formik和Redux表单,可是更好!凭借其更简单的语法,速度,更少的从新渲染数和更好的可维护性,它开始爬上GitHub的阶梯。
它的体积很小,而且是考虑到性能而构建起来的。该库甚至提供了很是棒的表单生成器!它是React钩子库中GitHub star数量最多的库之一(14.8k)。
用法示例:
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 name="firstName" ref={register} /> <input name="lastName" ref={register({ required: true })} /> {errors.lastName && <span>"Last name is a required field."</span>} <input name="age" ref={register({ required: true })} /> {errors.age && <span>"Please enter number for age."</span>} <input type="submit" /> </form> ); }
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> ); }
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> ); }
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> )} </> ) }
它肯定是否正在处于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} </> ); }
React router 是React最受欢迎的库之一。它用于路由和获取应用程序URL历史记录等。它与Redux一块儿实现了用于获取此类有用的数据
提供的挂钩有:
它的名字很不言自明。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中玩得开心!发展愉快。
公众号:《前端阳光》 后台回复加群,欢迎和大佬们交流技术