大家都能看得懂的源碼(一)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
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...