iT邦幫忙

2021 iThome 鐵人賽

DAY 1
1
Modern Web

用30天更加認識 React.js 這個好朋友系列 第 1

Day1-鐵人賽大綱 & 為什麼要使用 Hook?

鐵人賽大綱

在這次鐵人賽的挑戰中,主要的目標是希望自己和讀者們可以更加認識 React.js 或者是複習一下以前學過的知識,所以安排了幾個單元來進行介紹,預期介紹的單元如下:

  1. React hooks(會帶到 React Context)
  2. React 表單驗證
  3. Redux & Redux toolkit
  4. React Router v5
  5. React 動畫
  6. 其他瑣碎 React 特性功能

註: 本系列挑戰文會全部以 functional component 去做介紹

為什麼要使用 Hook?

那在進入 React hooks 單元前,先來了解一下什麼是 hook?為什麼要使用 Hook?

在 React.js 的官網提到

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

1. 開發者不用再寫 class component

透過一些 React hooks,我們可以補足 function component 不能進行 react 生命週期和不能控制 state 的缺點,進而全部使用 function component 去進行開發,程式碼可以寫得比 class component 更簡潔一點。

2. 提升狀態邏輯的重用性

在過去,使用 class component 時需要使用 HOC(Higher Order Component) 與 Render Props 去進行 Code Reuse,但多層的 HOC 會造成 wrapper hell,維護性不佳。

但我們現在可以將和某個小功能相關的程式碼邏輯放在同一個 hook 裡面,讓不同的元件需要該小功能時,就可以使用該 hook,減少程式碼的重複性,也更方便維護該功能。

每次呼叫一個 Hook 時,都會有一個完全獨立且隔離的 state,所以你甚至可以在一個 component 使用同一個客製化 Hook 兩次

使用 hook 的限制

看起來 hook 確實很強大,但它也有些使用上的限制:

  1. 只在元件最上層使用 Hook,不能在 loop、條件判斷、nest function(在 function scope 中宣告的 function)調用hook。
  2. 名稱必須是以 use 開頭,包括自己建立的 custom hook 也是
  3. 只在 React function component 呼叫 Hook

在我們了解 hook 是什麼及為什麼要使用它後,接著就來認識一下有哪些 hook 吧!


下一篇
Day2-React Hook 篇-認識 useState
系列文
用30天更加認識 React.js 這個好朋友32

尚未有邦友留言

立即登入留言