如何学会看源码（大家都能看得懂的源码（一）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 工具库