ahooks

自从 React 16.8 版本推出 React hooks，越来越多的项目使用 Function Component。React hooks utils 库随即诞生，它主要解决的两个问题如下：

• 公共逻辑的抽象。
• 解决 React hooks 存在的弊端，比如闭包等。

ahooks就是一套高质量可靠的 React Hooks 库。

如官网所介绍，其特点如下：

• 易学易用

• 支持SSR

  • 将访问 DOM/BOM 的方法放在 useEffect 中（服务端不会执行），避免服务端执行时报错。
  • 源码中可以看到很多 isBrowser 的判断，主要是区分开浏览器环境和服务器环境。

• 对输入输出函数做了特殊处理，且避免闭包问题。

  • 输入的函数，永远都是使用最新的一份。这个是通过 useRef 进行实现。
  • 输出函数，地址都是不会变化的，这个是通过 useMemoizedFn（ahooks 封装的）实现的，其实现也是通过 useRef 实现。后面我们会提到。

• 包含大量提炼自业务的高级 Hooks

• 包含丰富的基础 Hooks。

• 使用 TypeScript 构建，提供完整的类型定义文件。可以学习一些 TypeScript 的技巧。

ahooks的种类繁多，基于 UI、SideEffect、LifeCycle、State、DOM 等分类提供了常用的 Hooks。

源码准备

1. 从ahooks仓库克隆源码

clone成功后，打开package.json文件查看，发现其包管理工具是pnpm。所以需要先全局安装pnpm。

什么是pnpm

pnpm是 Node.js 的替代包管理器。它是 npm 的直接替代品，但速度更快、效率更高。

为什么效率更高？当您安装软件包时，我们会将其保存在您机器上的全局存储中，然后我们会从中创建一个硬链接，而不是进行复制。对于模块的每个版本，磁盘上只保留一个副本。例如，当使用 npm 或 yarn 时，如果您有 100 个使用 lodash 的包，则磁盘上将有 100 个 lodash 副本。

pnpm 可让您节省数 GB 的磁盘空间！

pnpm的优势

pnpm 拥有 Yarn 超过 npm 的所有附加功能：

• 安全: 与 yarn 一样，pnpm 有一个包含所有已安装包校验和的特殊文件，用于在执行代码之前验证每个已安装包的完整性。
• 离线模式: pnpm 将所有下载的包 tarball 保存在本地注册表镜像中。当包在本地可用时，它从不发出请求。使用该–offline参数可以完全禁止 HTTP 请求。
• 速度: pnpm 不仅比 npm 快，而且比 yarn 快。无论是冷缓存还是热缓存，它都比 yarn 快。yarn 从缓存中复制文件，而 pnpm 只是从全局存储中链接它们。

了解更多，移步官网：pnpm

2. 检查node版本号，低于14.6需要先升级node

别问我怎么知道的，戳图：

node版本不符合要求的，跟随我一起升级node~

注意：仅mac有效！下述命令如果提示没有权限，请在命令的前边加上sudo

1. 清除node缓存

npm cache clean -f

2. 安装n模块（n模块是管理nodejs版本的）

npm install -g n

3. 升级node.js到最稳定版本

n stable

4. 查看node版本

node -v

5. 查看node安装路径

 which node

3. 全局安装pnpm

npm install pnpm --location=global

注意：全局安装不要使用-g 了，升级完node后这样会报错

4. 启动ahooks项目

npm run init
npm start

项目启动成功后，将看到和官方文档一模一样的页面。

项目文件和其对应功能如下：