本文是深入浅出 ahooks源码系列文章的第一篇，这个系列的目标主要有以下几点：,注：本系列对 ahooks 的源码解析是基于 v3.3.13。自己 folk 了一份源码，主要是对源码做了一些解读，可见 详情[1]。,第一篇主要介绍 ahooks 的背景以及整体架构。,自从 React 16.8 版本推出 React hooks，越来越多的项目使用 Function Component。React hooks utils 库随即诞生，它主要解决的两个问题如下：,那现在社区有哪些比较优秀的 React Hooks utils 库呢？,react-use[2] 是社区比较活跃的 React hooks utils 库，它的 star 数达到了 29.6k。它的功能非常强大，拥有的 hooks 已经 100+。假如你需要功能比较齐全，可以考虑选择 react-use。,如果不需要非常齐全的功能，只需要一些常见的功能，react-use 可能会稍微冗余了，可以考虑我们今天的主角——ahooks[3]，目前它的 star 数为 9.2k，也算是社区比较活跃。,官方介绍如下：,它具有如下特点：,将访问 DOM/BOM 的方法放在 useEffect 中（服务端不会执行），避免服务端执行时报错。,源码中可以看到很多isBrowser 的判断，主要是区分开浏览器环境和服务器环境。,输入的函数，永远都是使用最新的一份。这个是通过 useRef 进行实现。,输出函数，地址都是不会变化的，这个是通过 useMemoizedFn（ahooks 封装的）实现的，其实现也是通过 useRef 实现。后面我们会提到。,ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分类提供了常用的 Hooks。如下所示：,我们先从 ahooks 中 folk 一份[4]，clone 下来。,如果你能成功跑起服务，就会看到和官方文档一模一样的页面。,从仓库的根目录的 package.json 中可以得到以下信息。,它的目录结构中，可以看到 docs 中存放仓库公共文档。packages 中存放两个包，hooks 和 use-url-state。整体的结构跟 dumi 中给出的 lerna 项目的结构相似。其中每个包下面的每个组件都可以书写对应的文档，不一样的是，hooks 中每个组件多了 __tests__ 文件夹，这个是用来写单元测试的。,跟 hooks 相似的组织形式,可以用以下一张图，大致总结一下 ahooks 的工程架构：,刚刚也提到，ahooks 是采用了 monoRepo 的方式，我们的源码都是在 packages 中，我们来看下 hooks。先看 packages/hooks/package.json。另外要使用 useUrlState 这个 hook，需要独立安装 @ahooksjs/use-url-state，其源码在 packages/use-url-state 中。我理解官方的用意应该是这个库依赖于 react-router，可能有一些项目不需要用到，把它提出来有助于减少包的大小。,回到 packages/hooks。重点关注一下 dependencies 和 peerDependencies。可以看到其实它内部还是使用了一些其他的工具库的，比如 lodash（估计是避免重复造轮子，但感觉这样会导致包会变大）。后面我们也会对这些工具库做一个探索。,另外解释下 peerDependencies。,这对于封装 npm 包非常重要。当你写的包 a 里面依赖另一个包 b，而这个包 b 是引用这个包 a 的业务的常用的包的时候，建议写在 peerDependencies 里，避免重复下载/多个版本共存。,作为系列的第一篇，介绍了 React hooks utils 库的背景以及 ahooks 的特点简介和整体架构，接下来会探索各个常见的 hooks 方法实现，敬请期待。,ahooks 正式发布：值得拥抱的 React Hooks 工具库[6]。,[1]详情: https://github.com/GpingFeng/hooks,[2]react-use: https://github.com/streamich/react-use,[3]ahooks: https://ahooks.js.org/zh-CN/guide,[4]一份: https://github.com/GpingFeng/hooks,[5]lerna: https://www.lernajs.cn/,[6]ahooks 正式发布：值得拥抱的 React Hooks 工具库: https://developer.aliyun.com/article/768059
© 版权声明
文章版权归作者所有，未经允许请勿转载。
