大家都能看得懂的源碼(一)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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...