大家都能看得懂的源碼(一)ahooks 整體架構篇

来源:https://www.cnblogs.com/gopal/archive/2022/08/11/16573861.html
-Advertisement-
Play Games

作為系列的第一篇,介紹了 React hooks utils 庫的背景以及 ahooks 的特點簡介和整體結構,接下來會探索各個常見的 hooks 方法實現,敬請期待。 ...


本文是深入淺出 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__ 文件夾,這個是用來寫單元測試的。

跟 hooks 相似的組織形式

可以用以下一張圖,大致總結一下 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 方法實現,敬請期待。

參考


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 原文:Jetpack Compose學習(9)——Compose中的列表控制項(LazyRow和LazyColumn) - Stars-One的雜貨小窩 經過前面的學習,大致上已掌握了compose的基本使用了,本篇繼續進行擴展,講解下載Compose中的列表控制項LazyRow和LazyColumn ...
  • 數據訂閱是運動健康類應用中很常見的功能,用戶訂閱運動記錄、健康記錄等數據,當這些數據發生變化時,用戶能夠即時在App上接收到推送通知。 例如某位用戶最近正在鍛煉身體,為自己設定了每天走1萬步,每周達成3次的目標;常規的數據訂閱可以做到每天給用戶推送當天步數,但用戶需要自己進行二次計算才能得知自己是否 ...
  • 盒模型 點擊打開視頻教程 標準盒模型、怪異盒模型(IE盒模型) 什麼是盒模型? 盒模型的作用:規定了網頁元素如何顯示以及元素間的相互關係 盒模型的概念:盒模型是css佈局的基石,它規定了網頁元素如何顯示以及元素間的相互關係。 css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、 ...
  • 背景 項目中用到了vue的element-ui框架,用到了el-tree組件。由於數據量很大,使用了數據懶載入模式,即非同步樹。非同步樹採用覆選框進行結點選擇的時候,沒法自動展開,官方文檔找了半天也沒有找到好的辦法! 找不到相關的配置,或者方法可以使用。 經過調試與閱讀elment-ui源碼才發現有現成 ...
  • 有時候我們不希望組件被重新渲染影響使用體驗;或者處於性能考慮,避免多次重覆渲染降低性能。而是希望組件可以緩存下來,維持當前的狀態。這時候就需要用到keep-alive組件。 開啟keep-alive 生命周期的變化. 初次進入時: onMounted> onActivated 退出後觸發 deact ...
  • 本文是深入淺出 ahooks 源碼系列文章的第三篇,該系列已整理成文檔-地址。覺得還不錯,給個 star 支持一下哈,Thanks。 本文來探索一下 ahooks 是怎麼解決 React 的閉包問題的?。 React 的閉包問題 先來看一個例子: import React, { useState, ...
  • 介紹 es表示ECMASCript ,他是從es3,es5,es6,es5是2009.12月發佈的,es6是2015.6月發佈的。vue2完全支持es5的(vue3完全支持es6的),react完全支持es6 es5的新特性 嚴格模式(對應的相反的稱為怪異模式) 'use strict' //一般用 ...
  • useRequest 是 ahooks 最核心的功能之一,它的功能非常豐富,但核心代碼(Fetch 類)相對簡單,這得益於它的插件化機制 ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...