解析ahooks整体架构及React工具库源码丨本际云推荐

解析ahooks整体架构及React工具库源码

ahooks源码解析第一篇：Reacthooksutils库与ahooks整体架构

你好，我是本际云服务器推荐网的小编小本本，今天为大家带来ahooks源码解析的第一篇文章。本系列旨在加深大家对Reacthooks的理解，学习如何抽象自定义hooks并构建属于自己的Reacthooks工具库，同时培养阅读学习源码的习惯。这篇文章主要介绍Reacthooksutils库的背景以及ahooks的整体架构。

解析ahooks整体架构及React工具库源码

Reacthooksutils库

自从React16.8版本推出Reacthooks后，使用FunctionComponent越来越广泛。Reacthooksutils库随之诞生，直接解决公共逻辑的抽象和Reacthooks存在的弊端（比如闭包等）。目前比较优秀的ReactHooksutils库有react-use和ahooks。

react-use是社区比较活跃的Reacthooksutils库，它的star数达到了29.6k，拥有的hooks已经100+。如果需要功能比较齐全，可以考虑选择react-use。但如果只需要一些常见的功能，react-use就可能会稍微冗余了，这时候就可以考虑到ahooks，目前它的star数为9.2k，也算是社区比较活跃。

ahooks整体架构

ahooks是一套高质量可靠的ReactHooks库，具有易学易用、支持SSR、将访问DOM/BOM的方法放在useEffect中（服务端不会执行）等特点。源码中可以看到很多isBrowser的判断，主要是区分开浏览器环境和服务器环境。对输入输出函数做了特殊处理，且避免闭包问题。包含大量提炼自业务的高级Hooks和丰富的基础Hooks。使用TypeScript构建，提供完整的类型定义文件，可以学习一些TypeScript的技巧。

ahooks基于UI、SideEffect、LifeCycle、State、DOM等分类提供了常用的Hooks。项目启动需要先从ahooks中fork一份，clone下来。整体结构是一个monoRepo，使用lerna进行管理。单元测试是使用jest实现。hooks是存放常用hooks的文件夹，每个组件都可以书写对应的文档。另外要使用useUrlState这个hook，需要独立安装@ahooksjs/use-url-state，其源码在packages/use-url-state中。

在hooks的package.json中，可以看到它内部使用了一些其他的工具库，比如lodash等，其中每个包下面的每个组件可以书写对应的文档，而hooks中每个组件多了__tests__文件夹，这个是用来写单元测试的。PeerDependencies的目的是为了提示宿主环境去安装满足插件peerDependencies所指定依赖的包，最终解决插件与所依赖包不一致的问题。

以上就是ahooks源码解析第一篇的内容，介绍了Reacthooksutils库的背景以及ahooks的整体架构。后续会为大家带来更多精彩内容，欢迎继续关注。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7235.html