如何学会看源码（大家都能看得懂的源码（一）ahooks 整体架构篇）

本文是深入浅出 ahooks 源码系列文章的第一篇  
    
    
    
，该系列已整理成文档-地址    
    
    
。觉得还不错

     


     


     


，给个 star 支持一下哈 




 




 




 ，Thanks   


     


     


     。

第一篇主要介绍 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 数为 10k(2022.08.10)                 ，也算是社区比较活跃
 



 



 



。

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 下来                 。（当时我 folk 的时候还是用的 yarn

    




    




    




 ，现在应该是用 pnpm















，猜测是性能有关） 




    




    




    
。

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 工具库