React Hooks 在版本 16.8 中被加入到 React，完全改變了我們撰寫 React 應用的方式。在引入 hooks 之前，我們必須使用類別組件來管理狀態和生命週期方法，這使得代碼變得複雜，特別是在大型應用中。Hooks 讓我們能夠使用函數組件來更輕鬆地處理狀態、副作用和性能優化等問題。
使用 hooks，我們可以：
- 管理狀態 (useState),
- 處理副作用，例如獲取數據 (useEffect)，以及
- 改善性能 (useMemo, useCallback)。
在這篇文章中，我們將介紹您需要了解的最重要的 React Hooks。我將解釋每個 hooks 的功能、為什麼它有用，以及如何在您的項目中使用它，讓您的 React 代碼更簡單且更有效率。
1. useState
功能：
useState 可以讓您為函數組件添加狀態。在引入 hooks 之前，只有類別組件可以擁有狀態，但現在您也可以在函數組件中使用它。這個 hook 會返回兩個東西：當前狀態和一個用於更新該狀態的函數。
何時使用：
當您需要追蹤隨時間變化的值時（例如表單中的使用者輸入，或顯示和隱藏元素的切換狀態），使用 useState。
範例：
為什麼重要：
它讓在函數組件中處理簡單狀態變得容易，並保持您的代碼比類別組件更具可讀性。
嘗試學習：useState Hook in React — Crash Course 由 Web Dev Simplified
2. useEffect
功能：
useEffect 允許您在組件中執行副作用，例如獲取數據、更新 DOM 或訂閱 WebSocket 等。它會在組件渲染後運行，您可以通過傳遞依賴項來控制它的運行時機。
何時使用：
每當您需要在渲染後或值改變時運行代碼時，使用 useEffect，例如在組件掛載時從 API 獲取數據，或在值變更時更新文檔標題。
範例：
為什麼重要：
它取代了舊的生命週期方法，如 componentDidMount 和 componentDidUpdate，讓處理副作用變得更簡單、更具聲明性。
嘗試學習：React useEffect Hook — What, Why, and How 由 Web Dev Simplified
3. useContext
功能：
useContext 允許您在不必手動在組件樹的每一層傳遞屬性的情況下訪問上下文中的值（也稱為「屬性穿越」）。它使得在應用中共享數據變得容易，例如當前主題、使用者驗證狀態或語言設置。
何時使用：
當您有多個組件需要訪問的數據或函數時，使用 useContext，例如全局設置、主題或共享狀態。
範例：
為什麼重要：
它簡化了通過多層組件傳遞數據的過程，並保持您的代碼不重複（DRY，Don’t Repeat Yourself）。
嘗試學習：React useContext Hook Tutorial 由 Web Dev Simplified
4. useReducer
功能：
useReducer 類似於 useState，但更適合管理更複雜的狀態邏輯。您不是直接設置狀態，而是向一個 reducer 函數發送動作，這個函數根據動作來決定狀態應如何變化。
何時使用：
當組件的狀態管理對 useState 來說變得過於複雜時使用 useReducer，例如當您需要處理多個相關的狀態或狀態轉換時。
範例：
為什麼重要：
它非常適合處理有多個轉換的狀態（例如表單狀態或有複雜動作的狀態）。它還能夠更容易理解和預測狀態變化的方式。
嘗試學習：useReducer Hook — React Hooks Tutorial 由 Web Dev Simplified
5. useMemo
功能：
useMemo 有助於提高性能，通過緩存計算的結果，並僅在其依賴項發生變化時重新計算。對於昂貴的計算或渲染大型列表特別有用。
何時使用：
當您有昂貴的計算（例如排序、過濾）不需要在每次渲染時重新計算，除非某些值（依賴項）已經改變時，使用 useMemo。
範例：
為什麼重要：
它防止不必要的重新計算，提高應用的性能，特別是在頻繁重新渲染的組件中。
嘗試學習：React useMemo Hook — Avoid Unnecessary Calculations 由 Web Dev Simplified
6. useCallback
功能：
useCallback 類似於 useMemo，但它記憶的是函數而不是值。它確保函數參考在渲染之間保持不變，這可以防止依賴於該函數的子組件不必要的重新渲染。
何時使用：
當將函數作為屬性傳遞給子組件時使用 useCallback，並且您不希望該子組件在父組件重新渲染時不必要地重新渲染。
範例：
為什麼重要：
它防止性能問題，讓函數不需要在每次渲染中被重新創建，這可能導致子組件即使在不必要的情況下也會重新渲染。
嘗試學習：React useCallback Hook Tutorial 由 The Net Ninja
7. useRef
功能：
useRef 讓您訪問在渲染之間持久化的可變對象。它通常用於直接引用 DOM 元素或存儲不會在更新時觸發重新渲染的值。
何時使用：
當您需要直接與 DOM 元素互動（例如，聚焦輸入）或需要存儲不會更改 UI 的值（例如計時器 ID）時，使用 useRef。
範例：
為什麼重要：
它對於直接操作 DOM 和管理可變值而不造成不必要的重新渲染至關重要。
嘗試學習：useRef Hook - React Tutorial 由 Web Dev Simplified
結論：
掌握這些 React Hooks 將使您成為更有效率的開發者，使您能編寫更乾淨、更具可擴展性的代碼。像 useState 和 useEffect 這樣的 hooks 處理基本狀態和副作用，而更高級的 hooks 如 useMemo、useReducer 和 useContext 則幫助您優化性能並輕鬆管理更複雜的邏輯。
原文出處：https://dev.to/harshanalk/mastering-react-a-guide-to-the-most-important-react-hooks-25dg
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式