React hooks工具,总有一款适合你的

581 阅读4分钟

hook 是什么呢?react在16.8的新特性中,可以不编写 class 的情况使用state和其它的特性。它可以帮助在组件中使用不同的 React 功能。你可以使用内置的 Hook 或使用自定义 Hook。

使用一些自定义hooks可以提高我们开发效率避免重复造轮子。下面会列举一些常用的工具库,方便大家了解。

参数github-stargithub-usergithub-fork
ahooks13.6k21.2k2.6k
swr29.8k286k1.2k
react-use40.9k88.23.1k
usehooks8.8k8.1k486
Beautiful React Hook8.1k1.5k570
awesome-react-hooks9.7k-780
react-hook-form40.2k795k2k

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集合。

该工具对于后台管理系统有着一定的特定。

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还是第三方的都是帮助我们快速开发,避免重复造轮子。