hook 是什么呢?react在16.8的新特性中,可以不编写 class 的情况使用state和其它的特性。它可以帮助在组件中使用不同的 React 功能。你可以使用内置的 Hook 或使用自定义 Hook。
使用一些自定义hooks可以提高我们开发效率避免重复造轮子。下面会列举一些常用的工具库,方便大家了解。
| 参数 | github-star | github-user | github-fork |
|---|---|---|---|
| ahooks | 13.6k | 21.2k | 2.6k |
| swr | 29.8k | 286k | 1.2k |
| react-use | 40.9k | 88.2 | 3.1k |
| usehooks | 8.8k | 8.1k | 486 |
| Beautiful React Hook | 8.1k | 1.5k | 570 |
| awesome-react-hooks | 9.7k | - | 780 |
| react-hook-form | 40.2k | 795k | 2k |
ahooks
这是一套阿里巴巴开源的一套高质量可靠的 React Hooks 库,它封装了大量好用的Hooks。特点如下:
- 易学易用
- 支持 SSR
- 对输入输出函数做了特殊处理,避免闭包问题
- 包含大量提炼自业务的高级 Hooks
- 包含丰富的基础 Hooks
- 使用 TypeScript 构建,提供完整的类型定义文件
ahooks 里面也封装了强大的 request hook,讲请求方法进行封装和过滤,比如缓存、轮询、重试等。
该hook封装了很多生命周期、浏览器等内容,对web系统比较友好。
SWR
SWR 这个名字来自于 stale-while-revalidate。一种由 HTTP RFC 5861 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据(过期的),同时发送 fetch 请求(重新验证),最后得到最新数据。只需一个Hook,就可以显着简化项目中的数据获取逻辑。
SWR 首先从缓存返回数据(陈旧),然后发送请求(重新验证),最后再次带来最新数据。
只需一个钩子,您就可以显着简化项目中的数据获取逻辑。并且还涵盖了速度、正确性、稳定性等各个方面,帮助您打造更好的体验。特点如下:
- 快速、轻量级且可重用的数据获取
- 传输和协议无关
- 内置缓存和请求重复数据删除
- 实时体验
- 重新验证焦点
- 网络恢复重新验证
- 轮询
- 分页和滚动位置恢复
- SSR和SSG
- 局部突变( UI)
- 错误重试
这款 hook 主要对数据进行处理。适用于 react 多端项目。
react-use
React Use 是一个必不可少的 React Hooks 集合。其包含了传感器、用户界面、动画效果、副作用、生命周期、状态这六大类的Hooks。
该工具对 web 和 h5 项目 界面和体验有很好的体验
usehooks
useHooks 是一组易于理解的 React Hook集合。
- useBattery
- useClickAway
- useCopyToClipboard
- useCounter
- useDebounce
- useDefault
- useDocumentTitle
- ......
该工具对于后台管理系统有着一定的特定。
Beautiful React Hook
Beautiful React Hook 是一组React hooks 来加速你的组件和 hooks 开发。允许开发人员将组件的业务逻辑抽象为单个可重用的函数。
特点如下:
- 简明API
- 小巧轻便
- 易于学习
react-hook-form
React Hook Form 是一个高性能、灵活、易拓展、易于使用的表单校验库,用于 React Web 和 React Native 的表单验证。其具有以下特性:
- 考虑了性能、用户体验和开发者体验而构建
- 采用原生 HTML 表单验证
- 与 UI 库无缝集成
- 小巧轻量,无任何依赖
- 支持 Yup、Zod、Superstruct、Joi、Vest、class-validator、io-ts、nope 等验证库以及自定义验证
当涉及到 React 中的表单构建时,React Hook Form是一个高性能的、轻量的库。没有任何依赖,可以通过减少代码、隔离重新渲染、更快的挂载等来提高应用程序性能。
awesome-react-hooks
Awesome React Hooks 是一个 React Hooks 资源集合,该集合包含React Hooks教程、视频、工具、 文章,Hooks列表。其中 Hooks 列表中包含了众多实用的自定义Hooks。
大家可以了解并学习里面相关内容。
总结
react hooks 可以高效开发组件和业务逻辑。原来的一些工具也是不断适配hook,比如router、redux等工具。
现如今 hook 写法还是比较流行的。不管 react 内置hook还是第三方的都是帮助我们快速开发,避免重复造轮子。