共计 2492 个字符，预计需要花费 7 分钟才能阅读完成。
本文是深入浅出 ahooks 源码系列文章的第一篇，这个系列的指标次要有以下几点：
- 加深对 React hooks 的了解。
- 学习如何形象自定义 hooks。构建属于本人的 React hooks 工具库。
- 造就浏览学习源码的习惯，工具库是一个对源码浏览不错的抉择。
注：本系列对 ahooks 的源码解析是基于 v3.3.13。本人 folk 了一份源码，次要是对源码做了一些解读，可见 详情。
第一篇次要介绍 ahooks 的背景以及整体架构。
React hooks utils 库
自从 React 16.8 版本推出 React hooks，越来越多的我的项目应用 Function Component。React hooks utils 库随即诞生，它次要解决的两个问题如下：
- 公共逻辑的形象。
- 解决 React hooks 存在的弊病，比方闭包等。
那当初社区有哪些比拟优良的 React Hooks utils 库呢？
react-use 是社区比拟沉闷的 React hooks utils 库，它的 star 数达到了 29.6k。它的性能十分弱小，领有的 hooks 曾经 100+。如果你须要性能比拟齐全，能够思考抉择 react-use。
如果不须要十分齐全的性能，只须要一些常见的性能，react-use 可能会略微冗余了，能够思考咱们明天的配角——ahooks，目前它的 star 数为 9.2k，也算是社区比拟沉闷。
ahooks
简介
官网介绍如下：
ahooks，发音 [eɪ hʊks]，是一套高质量牢靠的 React Hooks 库。在以后 React 我的项目研发过程中，一套好用的 React Hooks 库是必不可少的，心愿 ahooks 能成为您的抉择。
特点
它具备如下特点：
- 易学易用。
-
反对 SSR。
- 将拜访 DOM/BOM 的办法放在 useEffect 中（服务端不会执行），防止服务端执行时报错。
- 源码中能够看到很多
isBrowser的判断，次要是辨别开浏览器环境和服务器环境。
-
对输入输出函数做了非凡解决，且防止闭包问题。
- 输出的函数，永远都是应用最新的一份。这个是通过
useRef进行实现。 - 输入函数，地址都是不会变动的，这个是通过
useMemoizedFn（ahooks 封装的）实现的，其实现也是通过useRef实现。前面咱们会提到。
- 输出的函数，永远都是应用最新的一份。这个是通过
- 蕴含大量提炼自业务的高级 Hooks。
- 蕴含丰盛的根底 Hooks。
- 应用 TypeScript 构建，提供残缺的类型定义文件。能够学习一些 TypeScript 的技巧。
hooks 品种
ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分类提供了罕用的 Hooks。如下所示：
ahooks 整体架构
我的项目启动
咱们先从 ahooks 中 folk 一份，clone 下来。
yarn run init
yarn start如果你能胜利跑起服务，就会看到和官网文档截然不同的页面。
整体构造
从仓库的根目录的 package.json 中能够失去以下信息。
- 文档是应用
dumi。是一款为组件开发场景而生的文档工具。 - 该我的项目是一个
monoRepo。它的项目管理是通过 lerna 进行治理的。 - 单元测试是通过 jest 实现。
它的目录构造中，能够看到 docs 中寄存仓库公共文档。packages 中寄存两个包，hooks 和 use-url-state。整体的构造跟 dumi 中给出的 lerna 我的项目的构造类似。其中每个包上面的每个组件都能够书写对应的文档，不一样的是，hooks 中每个组件多了 __tests__ 文件夹，这个是用来写单元测试的。
能够用以下一张图，大抵总结一下 ahooks 的工程架构：
hooks
刚刚也提到，ahooks 是采纳了 monoRepo 的形式，咱们的源码都是在 packages 中，咱们来看下 hooks。先看 packages/hooks/package.json。另外要应用 useUrlState 这个 hook，须要独立装置 @ahooksjs/use-url-state，其源码在 packages/use-url-state 中。我了解官网的用意应该是这个库依赖于 react-router，可能有一些我的项目不须要用到，把它提出来有助于缩小包的大小。
npm i @ahooksjs/use-url-state -S 回到 packages/hooks。重点关注一下 dependencies 和 peerDependencies。能够看到其实它外部还是应用了一些其余的工具库的，比方 lodash（预计是防止反复造轮子，但感觉这样会导致包会变大）。前面咱们也会对这些工具库做一个摸索。
"dependencies": {
"@types/js-cookie": "^2.x.x",
"ahooks-v3-count": "^1.0.0",
"dayjs": "^1.9.1",
"intersection-observer": "^0.12.0",
"js-cookie": "^2.x.x",
"lodash": "^4.17.21",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0"
},
"peerDependencies": {"react": "^16.8.0 || ^17.0.0 || ^18.0.0"},另外解释下 peerDependencies。
peerDependencies的目标是提醒宿主环境去装置满足插件peerDependencies所指定依赖的包，而后在插件import或者require所依赖的包的时候，永远都是援用宿主环境对立装置的npm包，最终解决插件与所依赖包不统一的问题。这里的宿主环境个别指的就是咱们本人的我的项目自身了。
这对于封装 npm 包十分重要。当你写的包 a 外面依赖另一个包 b，而这个包 b 是援用这个包 a 的业务的罕用的包的时候，倡议写在 peerDependencies 里，防止反复下载 / 多个版本共存。
总结
作为系列的第一篇，介绍了 React hooks utils 库的背景以及 ahooks 的特点简介和整体架构，接下来会摸索各个常见的 hooks 办法实现，敬请期待。
参考
- ahooks 正式公布：值得拥抱的 React Hooks 工具库
本文由 mdnice 多平台公布
