十大 React Hooks 库
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
Hooks通过帮助开发者编写更少的代码行数、更简洁、更易读、更易维护、更易重用的代码，从而简化了他们的工作。许多流行的库现在都提供了 Hooks，今天我们就来了解一下其中的一些。
- 如果您是 JavaScript 新手，请查看这篇《最佳 JavaScript 编码实践》。
- 如果您是 React Native 开发人员，请了解一下内置的React Hooks。
- 如果你想以简洁架构启动一个新项目，不妨了解一下React 简洁架构。
1. 使用http
use-http是一个流行的包，用于替代 Fetch API。它是一个维护良好的库，只需几行代码即可轻松集成。它使用 TypeScript 编写钩子，支持服务器端渲染 (SSR)和GraphQL。它会返回响应、加载信息和错误数据，并支持不同的请求方法，包括 GET、POST、PUT、PATCH 和 Delete。
特征 -
- 请求/响应拦截器
- 组件卸载时中止/取消待处理的 HTTP 请求
- 重试功能
- 内置缓存
- TypeScript 支持
GitHub 自述文件中有详细的文档说明，包括 CodeSanbox 示例和 YouTube 视频。
安装 - npm i use-http
一体化 -
import React, { useEffect, useState } from 'react';
import useFetch from 'use-http'
function UseHTTPExample() {
const [todos, setTodos] = useState([])
const { get, post, response, loading, error } = useFetch('https://jsonplaceholder.typicode.com')
useEffect(() => { initializeTodos() }, []);
async function initializeTodos() {
const initialTodos = await get('/todos')
if (response.ok) setTodos(initialTodos)
}
async function addTodo() {
const newTodo = await post('/todos', { title: 'KPITENG Article Writting' })
if (response.ok) setTodos([newTodo, ...todos])
}
return (
<>
<button onClick={addTodo}>Add Todo</button>
{error && 'Error!'}
{loading && 'Loading...'}
{todos.map(todo => (
<div key={todo.id}>{todo.title}</div>
))}
</>
)
}
export default UseHTTPExample;
2. Redux Hooks
Redux是最流行的状态管理库之一，大多数开发者都在使用 Redux。Redux Hooks 为 HOC（高阶组件）模式提供了一种替代方案，它利用现有的 connect() 方法，简化了连接到 store、获取数据和分发 action 的过程。让我们一起来看看。
热门的 Redux Hooks -
- 使用选择器
- 使用调度
- 使用商店
安装 - npm i react-redux @types/react-redux
一体化 -
import { useSelector, useDispatch } from "react-redux";
import React from "react";
import * as actions from "./actions";
const ReduxHooksExample = () => {
const dispatch = useDispatch();
const counter = useSelector((state) => state.counter);
return (
<div>
<span>{counter.value}</span>
<button onClick={() => dispatch(actions.incrementCounter)}>
Counter +1
</button>
</div>
);
};
3. 使用媒体
你是否曾遇到过管理 CSS 媒体查询的问题？useMedia hook 用一行代码就能轻松解决这个问题。它是一个感知型 hook，可以跟踪 CSS 媒体查询的状态，帮助你设计和开发响应式应用。
useMedia 是一个用 TypeScript 编写的包。该包拥有结构清晰的文档，解释了其用法和测试方法。
安装 - npm i use-media
一体化 -
const ResponsiveComponent = () => {
const isWide = useMedia({ minWidth: "1000px" });
return (
<span>
Screen is wide: {isWide ? "It's WideScreen" : "It's NarrowScreen"}
</span>
);
};
4. React Hook 表单
React Hook Form是一个表单钩子库，它类似于 Formik 和 Redux Form，但更简洁、更快速、渲染次数更少。useForm 函数返回 register、handleSubmit 和 errors 三个参数。register 用于注册表单元素，handleSubmit 管理提交操作，errors 用于管理验证并显示输入错误。
安装 - npm i react-hook-form
一体化 -
import React from "react";
import { useForm } from "react-hook-form";
function SignUpComponent() {
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 mandatory field."</span>}
<input name="age" ref={register({ required: true })} />
{errors.age && <span>"Please enter number for age."</span>}
<input type="submit" />
</form>
);
}
5. 国度
Constate hook 可以将本地状态提升到 React Context 层级。因此，您只需几行代码即可在应用程序的任何位置访问/更新状态变量。当您在多个组件中使用相同的状态时，这非常有用。例如，您可能在多个组件中使用了主题、颜色和字体，用户可以在一个地方更改这些设置，并且更改应该反映在整个应用程序中。该包使用 TypeScript 编写，非常精简。
安装 - npm i constate
一体化 -
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>
);
6. 使用防抖
useDebounce hooks——顾名思义——用于防抖动。它的作用类似于 React Native 中的 setTimeout，可以将代码执行延迟到稍后的时间。
安装 - npm i use-debounce
一体化 -
import React, { useState } from "react";
import { useDebounce } from "use-debounce";
export default function UseDebounceExample() {
const [text, setText] = useState("Hello KPITENG");
const [value] = useDebounce(text, 3);
return (
<div>
<input
defaultValue={"Hello"}
onChange={(e) => {
setText(e.target.value);
}}
/>
<p>Value: {text}</p>
<p>Debounced value: {value}</p>
</div>
);
}
7. React Router Hooks
React Router是一个流行的库，用于组件路由、组件历史记录管理等等。
热门路由器挂钩 -
- 使用历史记录
- 使用位置
- 使用参数
- 使用路由匹配
useHistory 帮助开发者管理组件的导航历史记录。useLocation 返回表示当前 URL 的对象，用于管理基于 URL 的用例。useParams 返回组件间路由时传递的参数。useRouteMatch 将当前 URL 与给定的字符串进行匹配，以执行相应的用例。
安装 - npm i react-router-dom
一体化 -
import { useHistory, useLocation, useRouteMatch } from "react-router-dom";
const RouteExample = () => {
let history = useHistory();
let location = useLocation();
let isMatchingURL = useRouteMatch("/blog/33");
function handleClick() {
history.push("/home");
}
return (
<div>
<span>Current URL: {location.pathname}</span>
{isMatchingURL ? <span>Matching provided URL! </span> : null}
<button type="button" onClick={handleClick}>
Go home
</button>
</div>
);
};
8. 使用悬停
useHover hooks 用于识别鼠标悬停的 React 元素。它非常易于使用和集成，并且还可以控制悬停效果的延迟。useHover 支持 TypeScript。
安装 - npm i react-use-hover
一体化 -
import useHover from "react-use-hover";
const HoverExample = () => {
const [isHovering, hoverProps] = useHover();
return (
<>
<span {...hoverProps} aria-describedby="overlay">
Hover me
</span>
{isHovering ? <div> Hey, you hover me! </div> : null}
</>
);
};
9. 使用门户
usePortal钩子允许在应用程序 DOM 层级结构之外创建元素。usePortal 广泛应用于下拉菜单、通知弹出窗口、模态框和工具提示等场景。由于 usePortal 与服务器端渲染 (SSR) 具有同构性，因此可以与之配合使用。usePortal 使用 TypeScript 编写，允许自定义门户样式以及更多其他选项。
usePortal 有一个定义完善的 Github readme，其中包含针对每个 SSR、模态框、下拉菜单、工具提示的代码示例。
安装 - npm i react-useportal
一体化 -
import React, { useState } from "react";
import usePortal from "react-useportal";
const UsePortalExample = () => {
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>
)}
</>
);
};
10. 使用本地存储
useStorage hook 允许开发者从 localStorage 中提取数据并将其保存。它会自动进行 JSON 序列化和同步。useLocalStorage 使用 TypeScript 编写，因此它提供了类型信息。
安装 - npm i @rehooks/local-storage
一体化 -
import React, { useState } from "react";
import { writeStorage, useLocalStorage } from '@rehooks/local-storage';
const UseLocalStorageExample() {
let counter = 0;
const [counterValue] = useLocalStorage('counterValue');
return (
<div>
<span>{counterValue}</span>
<button onClick={() => writeStorage('i', ++counter)}>
Click Me
</button>
</div>
);
}
感谢阅读博客！
KPITENG | 数字转型
www.kpiteng.com/blogs | hello@kpiteng.com
联系我们 | 关注我们 - LinkedIn | Facebook | Instagram