作者 | 思忠
圖檔來源：網絡
起因
從 React Hooks 正式釋出到現在，越來越多的項目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。
然而在實踐的過程中，我們發現在很多常見的場景下，大部分邏輯是重複且可被複用的，如對資料請求的邏輯處理，對防抖節流的邏輯處理等，同樣的代碼經常會在同一個或不同的項目中被重複的編寫 😂。
另一方面，由于 Hooks 雖然解決了 Class 元件的 this 、 LifeCycle 等學習成本過高的問題，但是也引入了諸如閉包、依賴地獄、不能在條件語句中使用的約定等等新的問題，導緻對 Hooks 新手而言并不友好，經常會遇到 Hooks 的各種奇怪問題而摸不着頭腦 🤣 。
解法
要解決上面的問題，讓我們回到 React Hooks 本身，相比 Class 而言 Hooks 到底給我們帶來了哪些優勢，怎麼利用這些優勢來提升生産效率。對比而言，React Hooks 的主要特性之一就是可以在元件之間共享可複用的狀态邏輯，友善了開發者将業務邏輯和 UI 視圖進行解耦，進而狀态與 UI 的界限會越來越清晰，順着這個思路，我們是否有機會将與業務無關的邏輯進行抽象，封裝一套通用場景的純邏輯的 Hooks 工具方法，答案是肯定的，我們稱之為 ice/hooks，其讨論過程詳見 [RFC] 通用場景的 Hooks 方案，這便也是 ahooks 的由來。
ice/hooks：面向中背景業務場景的 Hooks 方案。
那麼好奇的你肯定會問， ice/hooks 與标題的 ahooks 的關系是什麼? 待我細細道來 😆
在 ice/hooks RFC 期間，我們也對比參考了社群的同類方案諸如 react-use 等，但最終因為 react-use 提供的 Hooks 過于備援（已經超過 100+），大部分在實際業務中可能使用不到，以及它在一年時間内大版本已經變更到 v15 的原因等最終放棄選，最終确定 ice/hooks 中提供的 Hooks 一方面是基于 react-use 的基礎部分，另一方面更多的是貼合業務的，由業務中進行提煉出來的 Hooks 進行組合的方案。
正當方案确定準備開發時，在 ice/hooks RFC 評論區收到來自螞蟻 umi 團隊 #盡龍 的回複，希望可以共建維護一套阿裡集團通用的 Hooks 方案，經過幾輪讨論下來為避免重複建設，以及共同訴求的前提下，與螞蟻 umi 團隊，阿裡體育團隊達成共建 React Hooks 工具庫的目标，這便是 ahooks 工具庫品牌的由來。
ahooks：基于 React Hooks 的工具庫，緻力提供常用且高品質的 Hooks。
共建
通過近 2 個月的共建，ahooks 已正式釋出 v1.0 版本 ✊🏿 ✊🏽 ✊🏾。
項目目标
ahooks 定位于一套基于 React Hooks 的工具庫，核心圍繞 React Hooks 的邏輯封裝能力，降低代碼複雜度和避免團隊的重複建設為背景，共同建設和維護阿裡經濟體層面的 React Hooks 庫，使之成為和 antd/fusion 元件庫一樣的基礎設施能力，幫助開發者在邏輯層面省去大量的重複工作。
品牌更新
在共建之前由于 umi 團隊已經有了一定的 Hooks 沉澱，是以主要基于已有的能力進行整合和疊代，對特殊依賴的 Hooks 進行規範化，并将品牌更新為 ahooks。
社群開源
由于品牌更新和出于共建的考慮，ahooks 代碼也已送出了開源流程申請并已經通過審批，源代碼維護在 Alibaba Group 下。詳見
alibaba/hooksAPI 規範
ahooks 基于 UI、SideEffect、LifeCycle、State、DOM 等分類提供了常用的 Hooks，如下圖所示。并對每一類接口的 API 進行了規範化，如規範入參結構、傳回值結構等，保證 API 層面的簡潔和一緻性。
示例示範
- 用于管理異步資料請求的 Hook。
import { useRequest } from 'ahooks';
// 輸出值為多 value 類型的，結構為 {...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 類型的，結構為 [value, actions]
const [ state, { toggle, setTrue, setFalse }] = useBoolean(
defaultValue?: boolean,
); -
用于将狀态持久化存儲在 localStorage 中的 Hook
。
import { useLocalStorageState } from 'ahooks';
// 輸出值為 value 和 setValue 類型的，結構為 [value, setValue]
const [state, setState] = useLocalStorageState<T>(
key: string,
defaultValue?: T | (() => T),
): [T?, (value?: T | ((previousState: T) => T)) => void] 更多示例詳見 ahooks 官網： https://ahooks.js.org/zh-CN/hooks/async
開發疊代
在開源項目中如何保障 ahooks 的正常開發疊代是首先需要達成一緻共識的，是以我們也制定了相應的維護機制，即将現有的 Hooks 按照分類指派到每個人，被指派的人需要負責該分類下的新增、 日常維護、 Review 和疑難問題的解決。以及建立周報和周會機制，每兩周聚焦一次當下的進度和問題，以此確定開源項目正常的開發疊代。
- 如果你對 ahooks 感興趣
- 如果你需要的 Hooks 我們還沒有提供
- 如果你的業務場景裡有自定義的 Hooks 可沉澱到 ahooks
歡迎與我們聯系，或者加入我們一起參與項目開發 ❤️
下一步
随着 ahooks 正式版本的釋出，開源的主體工作基本已完成，但目前更多追求的是功能的完成，接下來一方面我們會基于各自的業務場景繼續不斷的完善和沉澱更多通用的 Hooks，簡化邏輯層面大量的重複工作，以此降低代碼複雜度和提升開發效率；另外一方面也在計劃編寫基于 React Hooks 的系列教程，幫助 Hooks 新手更好的了解和使用 React Hooks。
最後的最後，關于 ahooks 任何使用上的問題歡迎在釘釘群回報。
相關連結
關注「Alibaba F2E」
把握阿裡巴巴前端新動向