关于程序员:大家都能看得懂的源码一ahooks-整体架构篇

本文是深入浅出 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 多平台公布