Hooks 在刚发布的时候就迅速占领了 React 社区，而且它现在已经有了很多支持 Hook 的库。如果你在搜索引擎中搜索 React，已经很难不出现 Hook 这个关键字了。如果你现在还没有使用 Hook，你要抓紧在你的项目代码中加入 hook了，因为它实在是可以让你的编程变得简单又有趣。
保持干净的代码风格、可读性、可维护性、更少的代码量以及可重用性在React开发中至关重要。这个博客将向你展示你应该立即开始使用的 10 个关于 React Hook 的库。这个选择基于个人偏好。废话不多说，让我们开始吧。
1. use-http
use-http 是一个非常有用的包，用于替代 Fetch API。它的代码质量很高，而且维护很频繁。它让您的代码更加简单易懂，特别是在数据操作的部分。 这个库的源码本身使用 TypeScript 编写，甚至支持 SSR（服务器端渲染） 和 GraphQL。它返回响应、加载、错误数据和不同的请求方法，如 Get、Post、Put、Patch和Delete。
它提供的主要特点是:
- 请求/响应拦截器
- Suspense (目前正在实验中)
- 重试功能
- 缓存
使用示例:
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>
)}
</>
);
};
2. useMedia
您是否需要一种跟踪 CSS 媒体查询的方法？useMedia hook 提供了一个简单的方法来解决这个问题。 媒体查询在响应式网站中发挥着至关重要的作用。
它的源码使用 TypeScript 编写，提供支持 TypeScript。 这个库有详尽的文档来解释它的用法。
使用示例:
import useMedia from 'use-media';
const Example = () => {
const isWide = useMedia({minWidth: '1000px'});
return (
<span>
Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
</span>
);
};
3. Constate
Constate 这个库可以把 state 和 React Context 结合在一起. 这个意识着可以轻易地将组件上的 state 数据链接到 Context 中. 在多个组件共享相同的 state 数据的时候，它特别有用。
源码使用 TypeScript 编写，并且比较简短。 文档没有那么详细，但是够用。
使用示例:
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>
);
4. Redux hooks
Redux 是作为 React 开发者都知道的一个库。它在整个应用程序中用作全局状态管理器. React 社区发布 Hook 几个月后，Redux 就加入了 Hook 的支持。这个 Hook 可以用于代替之前的高阶组件方法 connect()。
提供的最引人注目的 Hook 是:
- useSelector
- useDispatch
- useStore
文档很好，有点复杂, 但是如果要开始使用它，还是要去看文档的。
使用示例:
import {useSelector, useDispatch} from "react-redux";
import React from "react";
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>
);
};
5. React hook form
React hook form 是一个关于表单的 hook，有点像 Formik 和 Redux form，但是比它们更好！
凭借其更简单的语法、速度、更少的重新渲染和更好的可维护性，它开始在 GitHub 中登顶。
它体积小，注重性能。这个库甚至提供了它的表单生成器，这很棒!
在 React hook 中的库，它的 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>
);
}
6. useLocalStorage
useLocalStorage 是一个小 的 hook，就像上面的那个一样。它对于提取和设置localStorage中的数据非常有用，操作很容易，并使用 TypeScript 编写，因此它提供类型系统。
文档的质量很高，并且有很多示例代码。
使用示例:
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>
);
}
7. usePortal
usePortal 使下拉菜单、模态框、通知弹出窗口、气泡提示框等的创建变得非常容易!
它提供了在应用程序的DOM层次结构之外创建元素的方法。
源码使用 TypeScript 编写，它的文档非常好，显示了许多示例，这些示例足以让您自己开始使用这个库。
使用示例:
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>
)}
</>
)
}
8. useHover
useHover 是一个侦测鼠标悬浮在某些元素时使用的一个 hook。
它的使用简单直观，而且该库很小，但如果你足够有创造力，它会很强大。
它也提供了悬停效果的延迟，支持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}
</>
);
}
9. React router hooks
React router 是最受欢迎的 React 库之一, 它用于路由和获取应用程序URL历史记录等。
与 Redux 结合在一起使用，它提供了获取这些有用数据的 hook。
提供的 hook 有:
- useHistory
- useLocation
- useParams
- useRouteMatch
它的名字不言自明。
UseHistory 将获取应用程序历史记录的数据的方法。
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>
);
}
希望你发现这篇文章很有趣，并且你学到了一些新的东西。祝您进一步探索 hook 玩得开心。