130+Hooks,解鎖react hooks使用的正确姿勢

為什麼會有 Hook

介紹 Hooks 之前，首先要給大家說一下 React 的元件 建立方式 ，一種是 類元件 ，一種是 純函數 元件，并且 React 團隊希望，元件不要變成複雜的容器，最好隻是資料流的管道。開發者根據需要，組合管道即可。也就是說元件的 最佳寫法 應該是 函數 ，而不是類。。

但是我們知道，在以往開發中

類元件

和

純函數元件

的差別是很大的，純函數元件有着類元件不具備的多種特點，簡單列舉幾條

純函數元件 沒有狀态
純函數元件 沒有生命周期
純函數元件 沒有this
隻能是 純函數

這就注定，我們所推崇的函數元件，隻能做

UI

展示的功能，涉及到狀态的管理與切換，我們不得不用

類元件

或者

redux

，但我們知道類元件的也是有缺點的，比如，遇到簡單的頁面，你的代碼會顯得很重，并且每建立一個類元件，都要去繼承一個

React執行個體

，至于

Redux

,更不用多說，很久之前

Redux

的作者就說過，“

能用React解決的問題就不用Redux

”,等等一系列的話。關于

React

類元件

redux

的作者又有話說

大型元件很難 拆分 和 重構 ，也很 難測試 。
業務邏輯分散在元件的各個方法之中，導緻 重複邏輯 或 關聯邏輯 。
元件類引入了複雜的程式設計模式，比如 render props 和 高階元件 。

類元件雖然功能齊全卻很重，純函數很輕便卻有上文幾點重大限制，是以 React 團隊設計了 React Hooks , React Hooks 就是加強版的函數元件，我們可以完全不使用 class ，就能寫出一個全功能的元件

Hook 解決了什麼問題

Hook 解決了我們五年來編寫和維護成千上萬的元件時遇到的各種各樣看起來不相關的問題。無論你正在學習 React ，或每天使用，或者更願嘗試另一個和 React 有相似元件模型的架構，你都可能對這些問題似曾相識。

React

沒有提供将可複用性行為“附加”到元件的途徑（例如，把元件連接配接到

store

）。如果你使用過

React

一段時間，你也許會熟悉一些解決此類問題的方案，比如

render

props

和

高階元件

。但是這類方案需要重新組織你的元件結構，這可能會很麻煩，使你的代碼難以了解。如果你在

React DevTools

中觀察過

React

應用，你會發現由

providers

，

consumers

，

高階元件

，

render props

等其他抽象層組成的元件會形成“

嵌套地獄

”。盡管我們可以在

DevTools

過濾掉它們，但這說明了一個更深層次的問題：

React

需要為共享狀态邏輯提供更好的原生途徑。

你可以使用 Hook 從元件中

提取狀态邏輯

，使得這些邏輯可以單獨測試并複用。

Hook

使你在無需修改元件結構的情況下

複用狀态邏輯

。這使得在

元件間

或

社群内

共享

Hook

變得更便捷。

官方提供了哪些 Hook

如果你剛開始接觸 Hook ，那麼可能需要先自行檢視 React 官方文檔

基礎 Hook
- useSstate
- useEffect
- useContext
額外的 Hook
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue

這篇文章的重點不會對官方

Hook

的使用做過多的講解，當然，想要用好

Hook

，首先要先把官方提供的這些

Hook

學明白，才能在項目開發的時候如魚得水，其次就是做一些自定義

Hook

的封裝，用來提高開發效率

當然，項目開發總不能遇到一個功能就去封裝一個自定義 Hook ，這裡為大家推薦兩個比較好用的 Hooks 庫: aHooks react-use ，這兩個庫使用在項目開發中真的能大大提高 開發效率 ，可以毫不誇張的說能夠降低你的 50% 的業務代碼，告别 996

什麼是 ahooks

官網: https://ahooks.js.org/zh-CN

ahooks 是一個 React Hooks 庫，緻力提供常用且高品質的 Hooks。在使用之前，你需要掌握 React 及 React Hooks 基礎用法。 ahooks 是由螞蟻 umi 團隊、 淘系 ice 團隊以及 阿裡體育 團隊共同建設的 React Hooks 工具庫。 ahooks 基于 React Hooks 的邏輯封裝能力，提供了大量常見好用的 Hooks ，可以極大降低代碼複雜度，提升開發效率。 ahooks 緻力成為和 antd/fusion 一樣的 React 基礎設施，幫助開發者在邏輯層面省去大量的重複工作。

安裝

# 安裝依賴
npm i ahooks --save

# 使用 Hooks
import { useRequest } from 'ahooks';

有哪些實用 Hooks

🔥異步請求
- useRequest — 一個強大的管理異步資料請求的 Hook 。
🔥table
- useAntdTable — 封裝了常用的 antd Form 與 antd Table 關聯邏輯，并且同時支援 antd V3 和 V4 。
- useFusionTable — 封裝了常用的 Fusion Form 與 Fusion Table 關聯邏輯。
🔥視圖類的
- useDrag & useDrop — 一對幫助你處理在拖拽中進行資料轉移的 hooks
- useDynamicList — 一個幫助你管理清單狀态，并能生成唯一 key 的 Hook 。
- useSelections — 常見關聯 checkbox 邏輯封裝，支援多選，單選，全選邏輯，還提供了是否選擇，是否全選，是否半選的狀态。
- useVirtualList — 提供虛拟化清單能力的 Hook ，用于解決展示海量資料渲染時首屏渲染緩慢和滾動卡頓問題。
🔥副作用
- useDebounce — 用來處理防抖值的 Hook 。
- useDebounceFn — 用來處理防抖函數的 Hook 。
- useInterval — 一個可以處理 setInterval 的 Hook 。
- useThrottle — 用來處理節流值的 Hook 。
- useThrottleFn — 用來處理節流函數的 Hook 。
- useTimeout — 一個可以處理 setTimeout 計時器函數的 Hook。
🔥生命周期
- useDebounceEffect — 為 useEffect 增加防抖的能力。
- useMount — 隻在元件 mount 時執行的 hook。
- useThrottleEffect — 為 useEffect 增加節流的能力。
- useTrackedEffect — 在 useEffect 的基礎上，追蹤觸發 effect 的依賴變化。
- useUnmount — 隻在元件 unmount 時執行的 hook。
- useUnmountedRef — 擷取目前元件是否已經解除安裝的 hook ，用于避免因元件解除安裝後更新狀态而導緻的記憶體洩漏
- useUpdate — 強制元件重新渲染的 hook。
- useUpdateEffect — 一個隻在依賴更新時執行的 useEffect hook。
- useUpdateLayoutEffect — 一個隻在依賴更新時執行的 useLayoutEffect Hook。
🔥狀态
- useUrlState — 一個同步元件内部狀态和 query 參數的 hook。
- useBoolean — 優雅的管理 boolean 值的 Hook。
- useControllableValue — 使元件的狀态即可以自己管理，也可以被外部控制
- useCookieState — 一個可以将狀态持久化存儲在 cookie 中的 Hook 。
- useCountDown — 一個用于管理倒計時的 Hook。
- useCounter — 一個可以管理 count 的 Hook。
- useHistoryTravel — 優雅的管理狀态變化曆史，可以快速在狀态變化曆史中穿梭 - 前進跟後退。
- useLocalStorageState — 一個可以将狀态持久化存儲在 localStorage 中的 Hook 。
- useMap — 一個可以管理 Map 類型狀态的 Hook。
- useNetwork — 一個可以管理網絡連接配接狀态的 Hook。
- usePrevious — 儲存上一次渲染時狀态的 Hook。
- useSessionStorageState — 一個可以将狀态持久化存儲在 sessionStorage 中的 Hook。
- useSet — 一個可以管理 Set 類型狀态的 Hook。
- useSetState — 管理 object 類型 state 的 Hooks，用法與 class 元件的 this.setState 基本一緻。
- useToggle — 用于在兩個狀态值間切換的 Hook。
- useWebSocket — 用于處理 WebSocket 的 Hook。
- useWhyDidYouUpdate — 幫助開發者排查是什麼改變導緻了元件的 rerender 。
🔥Dom 相關
- useClickAway — 優雅的管理目标元素外點選事件的 Hook。
- useDocumentVisibility — 可以擷取頁面可見狀态的 Hook。
- useEventListener — 優雅使用 addEventListener 的 Hook。
- useEventTarget — 常見表單控件(通過 e.target.value 擷取表單值) 的 onChange 跟 value 邏輯封裝，支援自定義值轉換和重置功能。
- useExternal — 一個用于動态地向頁面加載或解除安裝外部資源的 Hook。
- useFavicon — 用于設定與切換頁面 favicon 。
- useFullscreen — 一個用于處理 dom 全屏 的 Hook。
- useHover — 一個用于追蹤 dom 元素是否有 滑鼠懸停 的 Hook。
- useInViewport — 一個用于判斷 dom 元素是否在 可視範圍之内 的 Hook。
- useKeyPress — 一個優雅的管理 keyup 和 keydown 鍵盤事件的 Hook，支援鍵盤 組合鍵 ，定義鍵盤事件的 key 和 keyCode 别名輸入。
- useMouse — 一個跟蹤 滑鼠位置 的 Hook。
- useResponsive — 擷取響應式資訊。
- useScroll — 擷取元素的滾動狀态。
- useSize — 一個用于監聽 dom 節點尺寸變化的 Hook。
- useTextSelection — 實時擷取使用者目前選取的文本内容及位置。
- useTitle — 用于設定頁面标題的 Hook。
🔥進階 Hook
- useCreation — 是 useMemo 或 useRef 的替代品，確定執行個體不會被重新建立。
- useEventEmitter — 多元件間事件通知。
- useLockFn — 給異步函數加鎖，防止重複調用。
- usePersistFn — 持久化 function 的 Hook。
- useReactive — 提供一種資料響應式的操作體驗,定義資料狀态不需要寫 useState , 直接修改屬性即可重新整理視圖。
- useSafeState — 用法與 React.useState 完全一樣，但是在元件解除安裝後異步回調内的 setState 不再執行，避免因元件解除安裝後更新狀态而導緻的記憶體洩漏。

什麼是 react-use

是一個國外大佬開發，目前 start 25.9K ，github 位址: https://github.com/streamich/react-use

安裝

# 安裝依賴
npm i react-use --save

# 使用 Hooks
import { useBattery  } from 'react-use';

有哪些實用 Hooks

🔥傳感器
- useBattery — 跟蹤裝置電池狀态。
- useGeolocation — 跟蹤使用者裝置的地理位置狀态。
- useHover and useHoverDirty — 跟蹤滑鼠懸停某個元素的狀态。
- useIdle — 跟蹤使用者是否處于非活動狀态。
- useKey , useKeyPress , useKeyboardJs , 和 useKeyPressEvent — 追蹤按鍵。
- useLocation — 跟蹤頁面導航欄的位置狀态。
- useMedia — 跟蹤 CSS 媒體查詢的狀态。
- useMediaDevices — 跟蹤連接配接的硬體裝置的狀态。
- useMotion — 跟蹤裝置的運動傳感器的狀态。
- useMouse and useMouseHovered — 跟蹤滑鼠位置的狀态。
- useNetwork — 跟蹤使用者的網際網路連接配接狀态。
- useOrientation — 跟蹤裝置螢幕方向的狀态。
- usePageLeave — 當滑鼠離開頁面邊界時觸發。
- useScroll — 跟蹤 HTML 元素的滾動位置。
- useSize — 跟蹤 HTML 元素的次元。
- useStartTyping — 檢測使用者何時開始輸入。
- useWindowScroll — 跟蹤視窗滾動位置。
- useWindowSize — 跟蹤視窗尺寸。
🔥使用者界面
- useAudio — 播放音頻并公開其控件。
- useClickAway — 當使用者點選目标區域外時觸發回調。
- useCss — 動态調整 CSS。
- useDrop and useDropArea — 跟蹤檔案，連結和複制粘貼。
- useFullscreen — 全屏顯示元素或視訊。
- useSpeech — 從文本字元串合成語音。
- useVideo — 播放視訊，跟蹤其狀态，以及公開播放控件。
- useWait — UI 的複雜等待管理。
🔥動畫效果
- useRaf — 在每個 requestAnimationFrame 上重新呈現元件。
- useSpring — 根據彈簧動力學随時間插入數字。
- useTimeout — 逾時後傳回 true 。
- useTween — 重新渲染元件，同時補間 0 到 1 之間的數字。
- useUpdate — 傳回一個回調，在調用時重新呈現元件。
🔥副作用
- useAsync — 解析一個 async 函數。
- useAsyncFn — 異步函數的狀态管理。
- useAsyncRetry — useAsync 帶有 retry() 方法。
- useBeforeUnload — 當使用者嘗試重新加載或關閉頁面時顯示浏覽器警報。
- useCopyToClipboard — 将文本複制到剪貼闆。
- useDebounce — 防抖函數。
- useFavicon — 設定頁面的 favicon 。
- useLocalStorage — 管理 localStorage 中的值。
- useLockBodyScroll — 鎖定 body 元素的滾動。
- useSessionStorage — 管理 sessionStorage 中的值。
- useThrottle and useThrottleFn — 節流一個函數。
- useTitle — 設定頁面标題。
🔥生命周期
- useEffectOnce — 僅運作一次的修改後的 useEffect 。
- useEvent — 訂閱事件。
- useLifecycles — 調用 mount 和 unmount 回調。
- useRefMounted — 跟蹤元件是否已挂載。
- usePromise — 僅在安裝元件時解析 promise 。
- useLogger — 在元件經曆生命周期時登入控制台。
- useMount — 調用 mount 回調。
- useUnmount — 調用 unmount 回調。
- useUpdateEffect — 僅在更新時運作一個 effect 。
- useDeepCompareEffect — 運作一個 effect 通過深度比較其依賴項。
🔥狀态
- createMemo — memoized hooks 的工廠鈎子。
- useGetSet — 傳回狀态 getter get() 而不是原始狀态。
- useGetSetState — 就像 useGetSet 和 useSetState 有個孩子。
- useObservable — 跟蹤 Observable 的最新值。
- useSetState — 建立類似 this.setState 的 setState 方法。
- useToggle and useBoolean — 跟蹤布爾值的狀态。
- useCounter and useNumber — 跟蹤數字的狀态。
- useList — 跟蹤數組的狀态。
- useMap — 跟蹤對象的狀态。

以上介紹的兩個 Hooks 庫，運用在項目開發中可以說是能夠減少你的 50% 業務代碼，真的告别 996 ，利用更多的時間來學習新的知識，不要做業務開發的傀儡 🎃

當然在我們平時開發過程中，肯定會遇到一些項目中業務邏輯之類的封裝或者是以上兩個 Hooks 庫沒有涉及到的場景，這種情況下就需要自己去

自定義 Hook

了，千萬要記住: 不要因為自己的一時偷懶直接複制代碼，複制一時爽，重構火葬場 🔥🔥🔥

自定義 Hook

官方介紹:自定義 Hook 隻是将兩個函數之間一些共同的代碼提取到單獨的函數中。自定義 Hook 是一種自然遵循 Hook 設計的約定，而并不是 React 的特性。

沒錯，就是函數和函數之間的邏輯複用，但是必須要遵循

Hook

的設計約定，不遵循的話，由于無法判斷某個函數是否包含對其内部

Hook

的調用，

React

将無法自動檢查你的

Hook

是否違反了

Hook

的規則。以下是本人封裝的以

Modal

的形式來

展示錯誤資訊

的

Hook

，僅供參考:

import React, { useState, useEffect } from 'react'
import { Modal, Table } from 'antd'
import { ColumnsType } from 'antd/es/table'
interface IData {
  message: string
}

 // 截取兩個字元串之間字元
  function str_substr(start, end, str) {
    // 擷取開始下标和結束下标
    let firstIndex = str.indexOf(start)
    let lastIndex = str.lastIndexOf(end)
    return str.substring(firstIndex + 1, lastIndex)
  }

const useErrModal = (data: string) => {
  const [dataSource, setDataSource] = useState<Array<IData>>([])

  const tableContainer = () => (
    <Table size={'small'} dataSource={dataSource} columns={columns} pagination={false} />
  )
  const columns: ColumnsType<IData> = [
    {
      title: '錯誤明細',
      dataIndex: 'message',
      key: 'message'
    }
  ]

  // data 資料按照 [, ] 切割,資料事例 : "資料部分導入失敗:[第1行資料檢驗失敗原因:稅收編碼為必填項且必須為19位的有效編碼, 第2行資料檢驗失敗原因:稅率為必填項且為0開頭的小數且小數點後不能超過5位,稅收編碼為必填項且必須為19位的有效編碼]"
  let splitStr = str_substr('[', ']', data)
  let arr = splitStr.split(', ')
  let list = []
  arr.map((item, key) => {
    list.push({
      message: item
    })
  })
  setDataSource(list)

  Modal.warning({
    title: '錯誤資訊彙總',
    okText: '确定',
    content: tableContainer
  })
}

export default useErrModal

參考資料

[1]ahooks: https://ahooks.js.org/zh-CN

[2]react-use: https://github.com/streamich/react-use

[3]hooks 詳解: https://www.jianshu.com/p/d600f749bb19

[4]hooks 官方文檔: https://react.docschina.org/docs/hooks-intro.html

寫在最後

公衆号 ： 前端開發愛好者 專注分享 web 前端相關 技術文章 、 視訊教程 資源、熱點資訊等，如果喜歡我的分享，給 🐟🐟 點一個 贊 👍 或者 關注 ➕ 都是對我最大的支援。

歡迎

長按圖檔加好友

，我會第一時間和你分享

前端行業趨勢

，

面試資源

，

學習途徑

等等。

130+Hooks,解鎖react hooks使用的正确姿勢

關注公衆号後，在首頁：

回複 面試資料 ，擷取最新大廠面試資料。
回複 React實戰 ，擷取 React 最新實戰教程。
回複 Vue實戰 ，擷取 Vue 最新實戰教程。
更多教程資源應用盡有，歡迎 關注擷取

130+Hooks,解鎖react hooks使用的正确姿勢

為什麼會有 Hook

Hook 解決了什麼問題

官方提供了哪些 Hook

什麼是 ahooks

安裝

有哪些實用 Hooks

什麼是 react-use

安裝

有哪些實用 Hooks

自定義 Hook

參考資料

寫在最後

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

web開發之前後端渲染

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

130+Hooks,解鎖react hooks使用 的正确姿勢

為什麼會有 Hook

Hook 解決了什麼問題

官方提供了哪些 Hook

什麼是 ahooks

安裝

有哪些實用 Hooks

什麼是 react-use

安裝

有哪些實用 Hooks

自定義 Hook

參考資料

寫在最後

繼續閱讀

130+Hooks,解鎖react hooks使用的正确姿勢