資訊專欄INFORMATION COLUMN
起因
社會(huì)在不斷的向前，技術(shù)也在不斷的完善進(jìn)步。從 React Hooks 正式發(fā)布到現(xiàn)在，越來越多的項(xiàng)目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。
這樣的解析是不是很熟悉，在日常中時(shí)常都有用到，但也有一個(gè)可以解決這樣重復(fù)的就是對數(shù)據(jù)請求的邏輯處理，對防抖節(jié)流的邏輯處理等。
另一方面，由于 Hooks 雖然解決了 Class 組件的 this 、 LifeCycle 等學(xué)習(xí)成本過高的問題，但是也引入了諸如閉包、依賴地獄、不能在條件語句中使用的約定等等新的問題，導(dǎo)致對 Hooks 新手而言并不友好，經(jīng)常會(huì)遇到 Hooks 的各種奇怪問題而摸不著頭腦 ????。
解法
處理上述問題，直接回歸到 React Hooks 本身，相比 Class 而言 Hooks 給我們帶來的更高的處理效率在哪里。對比而言，React Hooks 的主要特性之一就是可以在組件之間共享可復(fù)用的狀態(tài)邏輯，方便了開發(fā)者將業(yè)務(wù)邏輯和 UI 視圖進(jìn)行解耦，從而狀態(tài)與 UI 的界限會(huì)越來越清晰，但我們也考慮到是否有機(jī)會(huì)將與業(yè)務(wù)無關(guān)的邏輯進(jìn)行抽象，封裝一套通用場景的純邏輯的 Hooks 工具方法，答案是肯定的，我們稱之為 ice/hooks，其討論過程詳見 [RFC] 通用場景的 Hooks 方案，這便也是 ahooks 的由來。
ice/hooks：面向中后臺(tái)業(yè)務(wù)場景的 Hooks 方案。
那么好奇的你肯定會(huì)問， ice/hooks 與標(biāo)題的 ahooks 的關(guān)系是什么?現(xiàn)在來細(xì)細(xì)說下
在 ice/hooks RFC 期間，需要對比參考了社區(qū)的同類方案諸如 react-use 等，最終就是因?yàn)?react-use 提供的 Hooks 過于冗余（已經(jīng)超過 100+），大部分在實(shí)際業(yè)務(wù)中可能使用不到，以及它在一年時(shí)間內(nèi)大版本已經(jīng)變更到 v15 的原因等沒有選擇，最終確定 ice/hooks 中提供的 Hooks 一方面是基于 react-use 的基礎(chǔ)部分，另一方面更多的是貼合業(yè)務(wù)的，由業(yè)務(wù)中進(jìn)行提煉出來的 Hooks 進(jìn)行組合的方案。
這里說點(diǎn)題外話，在 ice/hooks RFC 評論區(qū)收到來自螞蟻 umi 團(tuán)隊(duì) #盡龍 的回復(fù)，目前就是希望可以共建維護(hù)一套阿里集團(tuán)通用的 Hooks 方案，但我們目前最大的問題就是避免重復(fù)，在多方共同訴求的前提下，與螞蟻 umi 團(tuán)隊(duì)，阿里體育團(tuán)隊(duì)達(dá)成共建 React Hooks 工具庫的目標(biāo)，這便是 ahooks 工具庫品牌的由來。
ahooks：基于 React Hooks 的工具庫，致力提供常用且高質(zhì)量的 Hooks。
共建
通過近 2 個(gè)月的共建，ahooks 已正式發(fā)布 v1.0 版本 ????? ????? ?????。
項(xiàng)目目標(biāo)
ahooks 定位于一套基于 React Hooks 的工具庫，核心圍繞 React Hooks 的邏輯封裝能力，這樣就降低代碼復(fù)雜度和避免團(tuán)隊(duì)的重復(fù)建設(shè)為背景，而且也可以讓共同建設(shè)和維護(hù)阿里經(jīng)濟(jì)體層面的 React Hooks 庫，使之成為和 antd/fusion 組件庫一樣的基礎(chǔ)設(shè)施能力，大大提升效率，避免無用的重復(fù)工作。
品牌升級
在共建之前由于 umi 團(tuán)隊(duì)已經(jīng)有了一定的 Hooks 沉淀，因此主要基于已有的能力進(jìn)行整合和迭代，對特殊依賴的 Hooks 進(jìn)行規(guī)范化，并將品牌升級為 ahooks。
社區(qū)開源
由于品牌升級和出于共建的考慮，ahooks 代碼也已提交了開源流程申請并已經(jīng)通過審批，源代碼維護(hù)在 Alibaba Group 下。詳見alibaba/hooks
API 規(guī)范
ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks，如下圖所示。并對每一類接口的 API 進(jìn)行了規(guī)范化，如規(guī)范入?yún)⒔Y(jié)構(gòu)、返回值結(jié)構(gòu)等，保證 API 層面的簡潔和一致性。
示例演示
用于管理異步數(shù)據(jù)請求的 Hook。
import { useRequest } from 'ahooks';
// 輸出值為多 value 類型的，結(jié)構(gòu)為 {...values}
const { data, error, loading, ...rest } = useRequest<R>(
service: string | object | ((...args:any) => string | object),
{
...,
requestMethod?: (service) => Promise
})用于管理 boolean 值的 Hook。
import { useBoolean } from 'ahooks';
// 輸出值為單 value 與多 actions 類型的，結(jié)構(gòu)為 [value, actions]
const [ state, { toggle, setTrue, setFalse }] = useBoolean(
defaultValue?: boolean,
);用于將狀態(tài)持久化存儲(chǔ)在 localStorage 中的 Hook。
import { useLocalStorageState } from 'ahooks';
// 輸出值為 value 和 setValue 類型的，結(jié)構(gòu)為 [value, setValue]
const [state, setState] = useLocalStorageState<T>(
key: string,
defaultValue?: T | (() => T),
): [T?, (value?: T | ((previousState: T) => T)) => void]更多示例詳見 ahooks 官網(wǎng)：
https://ahooks.js.org/zh-CN/hooks/async
開發(fā)迭代
一致的目標(biāo)，才可以有一致的步伐，因此在開源項(xiàng)目中如何保障 ahooks 的正常開發(fā)迭代是我們共同的認(rèn)知，目前對于我們要做的就是制定了相應(yīng)的維護(hù)機(jī)制，或許在不就將現(xiàn)有的 Hooks 按照分類指派到每個(gè)人，被指派的人需要負(fù)責(zé)該分類下的新增、 日常維護(hù)、 Review 和疑難問題的解決。以及建立周報(bào)和周會(huì)機(jī)制，每兩周聚焦一次當(dāng)下的進(jìn)度和問題，以此確保開源項(xiàng)目正常的開發(fā)迭代。
在這里和大家說下更多的未來我們將更注重基于各自的業(yè)務(wù)場景繼續(xù)不斷的完善和沉淀更多通用的 Hooks，簡化邏輯層面大量的重復(fù)工作，以此降低代碼復(fù)雜度和提升開發(fā)效率；另外一方面也在計(jì)劃編寫基于 React Hooks 的系列教程，幫助 Hooks 新手更好的理解和使用 React Hooks。這樣就是為技術(shù)人員提升工作效率。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128280.html
這是講 ahooks 源碼的第一篇文章，簡要就是以下幾點(diǎn)： 加深對 React hooks 的理解。 學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫?！ ∨囵B(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫是一個(gè)對源碼閱讀不錯(cuò)的選擇?！ ∽ⅲ罕鞠盗袑?ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情。 第一篇主要介紹 a...
之所以講這篇文章主要是為了加深對 React hooks 的理解?！ ∫虼?，先要學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫?！ ∏遗囵B(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫是一個(gè)對源碼閱讀不錯(cuò)的選擇?！ ‖F(xiàn)在看下ahooks 是怎么封裝 cookie/localStorage/sessionStorage 的?！ ookie ahooks 封裝了 useCookie...
本篇主要和大家溝通關(guān)于ahooks ，我們可以理解為加深對 React hooks 的了解?！ ∥覀兿日f下關(guān)于抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫?！ ∑鋵?shí)我們應(yīng)該培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫是一個(gè)對源碼閱讀不錯(cuò)的選擇?！ ∽ⅲ罕鞠盗袑?ahooks 的源碼解析是基于v3.3.13。 現(xiàn)在就進(jìn)入主題用ahooks 來封裝 React要注意的時(shí)機(jī)？ Fun...
想必大家都能看得懂的源碼 ahooks 整體架構(gòu)篇，且可以使用插件化機(jī)制優(yōu)雅的封裝你的請求hook，現(xiàn)在我們就探討下ahooks 是怎么解決 React 的閉包問題的？。 React 的閉包問題 先來看一個(gè)例子： importReact,{useState,useEffect}from"react"; exportdefault()=>{ const[c...
我們講述的是關(guān)于 ahooks 源碼系列文章的第七篇，總結(jié)主要講述下面幾點(diǎn)： 鞏固 React hooks 的理解?！ W(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫?！ ∨囵B(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫是一個(gè)對源碼閱讀不錯(cuò)的選擇?！ ∽ⅲ罕鞠盗袑?ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情?！ ?..
閱讀 570·2023-03-27 18:33
閱讀 761·2023-03-26 17:27
閱讀 658·2023-03-26 17:14
閱讀 612·2023-03-17 21:13
閱讀 546·2023-03-17 08:28
閱讀 1836·2023-02-27 22:32
閱讀 1330·2023-02-27 22:27
閱讀 2212·2023-01-20 08:28
