React hooks是高度可重用的功能部件。它们允许我们封装副作用并组合和重用逻辑。
对于大多数用例，都有一个适用于React hooks的解决方案。既然有如此丰富的开源hooks可供使用，为什么要重复发明轮子呢？
1. react-swipeable
React Swipeable是一个react滑动事件处理程序hook。在某些情况下，React Swipeable是构建移动优先react应用程序的必备品。
假设你正在开发一个电子商务商店。你将希望在你的Web应用程序上启用“本机”移动行为。
移动用户与Web用户的互动方式大不相同。手机具有触摸手势，滑动，缩放等。为什么不为你的Web移动应用程序启用所有这些功能呢？
工作原理
const handlers = useSwipeable({
onSwiped: (eventData) => console.log("User Swiped", eventData),
...config,
});return <div {...handlers}> swipe here </div>;
以下是你在处理事件时可以访问的所有道具。
{
onSwiped, // After any swipe (SwipeEventData) => void
onSwipedLeft, // After LEFT swipe (SwipeEventData) => void
onSwipedRight, // After RIGHT swipe (SwipeEventData) => void
onSwipedUp, // After UP swipe (SwipeEventData) => void
onSwipedDown, // After DOWN swipe (SwipeEventData) => void
onSwipeStart, // Start of swipe (SwipeEventData) => void *see details*
onSwiping, // During swiping (SwipeEventData) => void
onTap, // After a tap ({ event }) => void// Pass through callbacks, event provided: ({ event }) => void
onTouchStartOrOnMouseDown, // Called for `touchstart` and `mousedown`
onTouchEndOrOnMouseUp, // Called for `touchend` and `mouseup`
}
有关集成和使用的信息，请参见react-swipeable NPM页面。
2. use-resize-observer
use-resize-observer是一个React hook，允许你测量元素的宽度和高度。
当处理图像裁剪，编辑，处理等操作时，此钩子非常方便。
如何使用
3. formik
在处理表单时 - Formik处理重复和繁琐的部分。
它跟踪值，错误，访问过的字段，协调验证和处理提交 - 你无需再处理这些内容。花费更少的时间布线状态和更改处理程序。
工作原理
假设我们想为博客添加通讯订阅表单。首先，我们的表单将只有一个名为email的字段。使用Formik，这只是几行代码。
有关集成和使用的信息，请参见Formik文档页面。
4. use-debounce
在JavaScript中进行去抖动是一种用于提高浏览器性能的模式。
网页中可能存在一些需要耗费时间的计算功能。例如，图像上传，多个API调用等。
如果这些方法被过于频繁地调用，它将极大地影响浏览器的性能。
去抖是一种编程实践，可确保耗时的任务不会如此频繁地触发。
工作原理
有关更多信息，请参见use-debounce NPM页面。
5. use-isomorphic-layout-effect
React在箱中提供了许多hooks之一是useLayoutEffect
React文档说有关useLayoutEffect：
useLayoutEffect签名与useEffecthook相同 - 但在所有DOM突变之后同步触发。
这意味着你只能在浏览器中使用useLayoutEffecthook。如果你正在服务器端呈现react代码，则会收到此错误消息：
警告：useLayoutEffect在服务器上不起作用，因为其效果无法编码到服务器呈现器的输出格式中。
为避免此错误消息 - useLayoutEffect仅应在仅在客户端上渲染的组件中使用。
useIsomorphicLayoutEffect通过在执行环境中切换useEffect和useLayoutEffect来解决该问题。
如何使用
+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';- import { useLayoutEffect } from 'react';const YourComponent = () => {+ useIsomorphicLayoutEffect(() => {
// your implementation
}, []);- useLayoutEffect(() => {
// your implementation
}, []);};
有关更多信息，请参见NPM软件包页面。
6. swr
SWR是用于数据获取的React Hooks库。名称“SWR”源自stale-while-revalidate
stale-while-revalidate是一种缓存失效策略，由HTTP RFC 5861推广。
如何使用
import useSWR from 'swr'function Profile() {
const { data, error } = useSWR('/api/user', fetcher)if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>return <div>hello {data.name}!</div>}
SWR首先从缓存返回数据（过时），然后发送请求（重新验证），最后再次使用最新数据。
在项目中显着简化数据获取逻辑。它还涵盖了速度，正确性和稳定性的所有方面，以帮助你构建更好的应用程序。
使用SWR，所有组件都将不断自动地获得数据更新流。用户界面将快速而反应灵敏。
在swr.vercel.app上查看完整文档和示例。
7. react-hotkeys-hook
react-hotkeys-hook用于在组件中使用键盘快捷键。该hook允许以声明方式侦听热键，并在用户按下给定热键时执行回调函数。```
如何工作
react-hotkeys-hook也监听按键。按键是用户必须按下的键的组合，以执行回调。假设我们的应用程序具有功能的快捷方式。例如，通过按shift+c创建一个Jira工单。
8. @use-gesture/react
@use-gesture是一个库，它可以将更丰富的鼠标和触摸事件绑定到任何组件或视图上。使用所获得的道具设置手势非常简单。
某些应用程序默认需要手势，并且是必需的。例如，如果你正在构建类似看板的应用程序，则必须使用手势。
可用的Hooks
@use-gesture/react导出了几个可以处理不同手势的钩子。一定要查看它们以进行深入的了解。
P.S.你可以单独使用它，但要充分利用它，你应该将其与动画库（例如react-spring）结合使用。尽管你当然可以使用任何其他库。
9. react-script-hook
react-script-hook是一个钩子，用于动态加载外部脚本并了解何时加载完成。在使用第三方API（例如Stripe，Twilio等）时非常好。
想象一下，你正在使用Stripe API接受付款。我们不希望让用户在API尚未完全加载时与付款进行交互而破坏我们的应用程序。这个钩子解决了上述问题。
如何使用
该钩子会自动处理脚本是否已从另一个钩子实例中加载（或开始加载）。
你可以安全地将相同的useScript钩子添加到多个依赖于相同外部脚本的组件中，它们将正确地阻止仅加载一个副本。
有关进一步说明，请参见NPM包文档。
10. react-scroll-parallax
react-scroll-parallax是一个钩子，可让你轻松地为横幅、图像或任何其他DOM元素添加视差滚动效果。
视差滚动提供了理想的环境，以生动、互动的方式讲述你的故事。让你的访问者掌握并按照自己的节奏走过你的故事。— 来源
如何使用
当元素滚动过视口时，将基于原始元素相对于视口的位置应用CSS转换效果。
import { useParallax } from 'react-scroll-parallax';function Component() {
const parallax = useParallax({
speed: -10,
});
return <div ref={parallax.ref} />;
}
使用速度将自动应用translateY CSS样式（或如果滚动轴是水平的，则应用translated）。
你可以使用旋转道具围绕其轴旋转元素。使用rotate道具围绕z轴旋转元素。
const Component = () => {
const parallax = useParallax<HTMLDivElement>({
rotate: [0, 360],
});
return (
<div ref={parallax.ref} className="spinner">
😵💫
<div className="diamond">💎</div>
<div className="clown">🤡</div>
<div className="money">💰</div>
<div className="hand">👌🏻</div>
</div>
);
};
来源：https://react-scroll-parallax.damnthat.tv/docs/usage/parallax-props#available-css-effects
有关深入了解，请参见如何工作部分。
11. react-storage-hooks
react-storage-hooks用于将应用程序状态与localStorage或sessionStorage同步。
此库中包含的useStorageState和useStorageReducer钩子类似于<a class="af oa" href="https://reactjs.org/docs/hooks-reference.html#usestate" rel="noopener ugc nofollow" target="_blank">useState</a>和<a class="af oa" href="https://reactjs.org/docs/hooks-reference.html#usereducer" rel="noopener ugc nofollow" target="_blank">useReducer</a>。但是有一些区别。请参阅如何部分以进行更深入的了解。
如何使用
12. @chakra-ui/color-mode
@chakra-ui/color-mode是一个React组件+Hook，它使用localStorage和matchMedia支持浅色模式和深色模式。我是暗色主题的忠实粉丝。这个钩子使用户可以简单地选择暗色或浅色主题。
如何使用
在 ThemeProvider 下面用 ColorModeProvider 包裹你的应用程序
import * as React from "react"
import { ColorModeProvider } from "@chakra-ui/color-mode"
import theme from "./theme"function App({ children }) {
return (
<ThemeProvider theme={theme}>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeProvider>
)
}
然后，在你的应用程序中使用 useColorMode 钩子。
function Example() {
const { colorMode, toggleColorMode } = useColorMode()
return (
<header>
<Button onClick={toggleColorMode}>
Toggle {colorMode === "light" ? "Dark" : "Light"}
</Button>
</header>
)
}
评论(0)