起因

從 React Hooks 正式發(fā)布到現(xiàn)在，越來(lái)越多的項(xiàng)目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。

然而在實(shí)踐的過(guò)程中，我們發(fā)現(xiàn)在很多常見(jiàn)的場(chǎng)景下，大部分邏輯是重復(fù)且可被復(fù)用的，如對(duì)數(shù)據(jù)請(qǐng)求的邏輯處理，對(duì)防抖節(jié)流的邏輯處理等，同樣的代碼經(jīng)常會(huì)在同一個(gè)或不同的項(xiàng)目中被重復(fù)的編寫(xiě) ??。

另一方面，由于 Hooks 雖然解決了 Class 組件的 this 、 LifeCycle 等學(xué)習(xí)成本過(guò)高的問(wèn)題，但是也引入了諸如閉包、依賴地獄、不能在條件語(yǔ)句中使用的約定等等新的問(wèn)題，導(dǎo)致對(duì) Hooks 新手而言并不友好，經(jīng)常會(huì)遇到 Hooks 的各種奇怪問(wèn)題而摸不著頭腦 ?? 。

解法

要解決上面的問(wèn)題，讓我們回到 React Hooks 本身，相比 Class 而言 Hooks 到底給我們帶來(lái)了哪些優(yōu)勢(shì)，怎么利用這些優(yōu)勢(shì)來(lái)提升生產(chǎn)效率。對(duì)比而言，React Hooks 的主要特性之一就是可以在組件之間共享可復(fù)用的狀態(tài)邏輯，方便了開(kāi)發(fā)者將業(yè)務(wù)邏輯和 UI 視圖進(jìn)行解耦，從而狀態(tài)與 UI 的界限會(huì)越來(lái)越清晰，順著這個(gè)思路，我們是否有機(jī)會(huì)將與業(yè)務(wù)無(wú)關(guān)的邏輯進(jìn)行抽象，封裝一套通用場(chǎng)景的純邏輯的 Hooks 工具方法，答案是肯定的，我們稱之為 ice/hooks，其討論過(guò)程詳見(jiàn) [RFC] 通用場(chǎng)景的 Hooks 方案，這便也是 ahooks 的由來(lái)。

ice/hooks：面向中后臺(tái)業(yè)務(wù)場(chǎng)景的 Hooks 方案。

那么好奇的你肯定會(huì)問(wèn)， ice/hooks 與標(biāo)題的 ahooks 的關(guān)系是什么? 待我細(xì)細(xì)道來(lái) ??

在 ice/hooks RFC 期間，我們也對(duì)比參考了社區(qū)的同類方案諸如 react-use 等，但最終因?yàn)?react-use 提供的 Hooks 過(guò)于冗余（已經(jīng)超過(guò) 100+），大部分在實(shí)際業(yè)務(wù)中可能使用不到，以及它在一年時(shí)間內(nèi)大版本已經(jīng)變更到 v15 的原因等最終放棄選，最終確定 ice/hooks 中提供的 Hooks 一方面是基于 react-use 的基礎(chǔ)部分，另一方面更多的是貼合業(yè)務(wù)的，由業(yè)務(wù)中進(jìn)行提煉出來(lái)的 Hooks 進(jìn)行組合的方案。

正當(dāng)方案確定準(zhǔn)備開(kāi)發(fā)時(shí)，在 ice/hooks RFC 評(píng)論區(qū)收到來(lái)自螞蟻 umi 團(tuán)隊(duì) #盡龍 的回復(fù)，希望可以共建維護(hù)一套阿里集團(tuán)通用的 Hooks 方案，經(jīng)過(guò)幾輪討論下來(lái)為避免重復(fù)建設(shè)，以及共同訴求的前提下，與螞蟻 umi 團(tuán)隊(duì)，阿里體育團(tuán)隊(duì)達(dá)成共建 React Hooks 工具庫(kù)的目標(biāo)，這便是 ahooks 工具庫(kù)品牌的由來(lái)。

ahooks：基于 React Hooks 的工具庫(kù)，致力提供常用且高質(zhì)量的 Hooks。

共建

通過(guò)近 2 個(gè)月的共建，ahooks 已正式發(fā)布 v1.0 版本 ??? ??? ???。

項(xiàng)目目標(biāo)

ahooks 定位于一套基于 React Hooks 的工具庫(kù)，核心圍繞 React Hooks 的邏輯封裝能力，降低代碼復(fù)雜度和避免團(tuán)隊(duì)的重復(fù)建設(shè)為背景，共同建設(shè)和維護(hù)阿里經(jīng)濟(jì)體層面的 React Hooks 庫(kù)，使之成為和 antd/fusion 組件庫(kù)一樣的基礎(chǔ)設(shè)施能力，幫助開(kāi)發(fā)者在邏輯層面省去大量的重復(fù)工作。

品牌升級(jí)

在共建之前由于 umi 團(tuán)隊(duì)已經(jīng)有了一定的 Hooks 沉淀，因此主要基于已有的能力進(jìn)行整合和迭代，對(duì)特殊依賴的 Hooks 進(jìn)行規(guī)范化，并將品牌升級(jí)為 ahooks。

社區(qū)開(kāi)源

由于品牌升級(jí)和出于共建的考慮，ahooks 代碼也已提交了開(kāi)源流程申請(qǐng)并已經(jīng)通過(guò)審批，源代碼維護(hù)在 Alibaba Group 下。詳見(jiàn) alibaba/hooks

API 規(guī)范

ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks，如下圖所示。并對(duì)每一類接口的 API 進(jìn)行了規(guī)范化，如規(guī)范入?yún)⒔Y(jié)構(gòu)、返回值結(jié)構(gòu)等，保證 API 層面的簡(jiǎn)潔和一致性。

示例演示

• 用于管理異步數(shù)據(jù)請(qǐng)求的 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]

更多示例詳見(jiàn) ahooks 官網(wǎng)：

https://ahooks.js.org/zh-CN/hooks/async

開(kāi)發(fā)迭代

在開(kāi)源項(xiàng)目中如何保障 ahooks 的正常開(kāi)發(fā)迭代是首先需要達(dá)成一致共識(shí)的，因此我們也制定了相應(yīng)的維護(hù)機(jī)制，即將現(xiàn)有的 Hooks 按照分類指派到每個(gè)人，被指派的人需要負(fù)責(zé)該分類下的新增、 日常維護(hù)、 Review 和疑難問(wèn)題的解決。以及建立周報(bào)和周會(huì)機(jī)制，每?jī)芍芫劢挂淮萎?dāng)下的進(jìn)度和問(wèn)題，以此確保開(kāi)源項(xiàng)目正常的開(kāi)發(fā)迭代。

• 如果你對(duì) ahooks 感興趣
• 如果你需要的 Hooks 我們還沒(méi)有提供
• 如果你的業(yè)務(wù)場(chǎng)景里有自定義的 Hooks 可沉淀到 ahooks

下一步

隨著 ahooks 正式版本的發(fā)布，開(kāi)源的主體工作基本已完成，但目前更多追求的是功能的完成，接下來(lái)一方面我們會(huì)基于各自的業(yè)務(wù)場(chǎng)景繼續(xù)不斷的完善和沉淀更多通用的 Hooks，簡(jiǎn)化邏輯層面大量的重復(fù)工作，以此降低代碼復(fù)雜度和提升開(kāi)發(fā)效率；另外一方面也在計(jì)劃編寫(xiě)基于 React Hooks 的系列教程，幫助 Hooks 新手更好的理解和使用 React Hooks。

相關(guān)鏈接

• https://ahooks.js.org/
• https://github.com/alibaba/hooks
• https://github.com/alibaba/ice

以上就是ahooks正式發(fā)布React Hooks工具庫(kù)的詳細(xì)內(nèi)容，更多關(guān)于React Hooks工具庫(kù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論