React Hooks 是允許您從功能元件「掛鉤」React 狀態和生命週期功能的函數。 Hooks 在 React 16.8 中引入，讓您無需編寫類別元件即可使用狀態和其他 React 功能。

我們來分解Hooks背後的核心概念：

1. 為什麼要使用 React Hooks？

在鉤子之前，狀態邏輯只能在類別元件中實作。功能組件是無狀態的，這使得它們的通用性較差。 Hooks 被引入：

• 允許功能元件中有狀態邏輯。
• 輕鬆地跨元件共享狀態邏輯。
• 避免樣板程式碼（例如，類別元件中的生命週期方法）。
• 增強組件重複使用和模組化。

2. Hooks的基本規則

使用鉤子時需要遵循兩個關鍵規則：

• 僅在頂層呼叫 Hooks：應該在函數的頂部呼叫 Hooks，而不是在循環、條件或巢狀函數內呼叫。這確保了 React 每次渲染元件時都以相同的順序呼叫 Hook。
• 僅從 React 函數呼叫 Hooks：您可以在函數式元件或自訂 Hooks 中使用 Hooks，但不能在常規 JavaScript 函數中使用。

3.內建React Hooks

讓我們來探索 React 中的一些關鍵內建鉤子：

useState
useState 允許您向功能組件新增狀態。

句法：

const [state, setState] = useState(initialState);

• state:目前狀態值。
• setState： 允許您更新狀態的函數。
• initialState: 狀態的初始值。

useEffect
useEffect 是用來處理功能元件中副作用的鉤子。這可能包括資料獲取、訂閱或直接與 DOM 互動。

句法：

useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

• 第一個參數是放置副作用邏輯的函數。
• 第二個參數是可選的依賴項數組。如果這些依賴項中的任何一個發生變化，效果將再次運行。

4.其他有用的鉤子

useMemo：記憶計算值以避免每次渲染時重新計算。
useCallback：記憶函數以避免在每次渲染時重新建立它。
useLayoutEffect：與 useEffect 類似，但在所有 DOM 突變後同步觸發。

鉤子的好處

• 更簡潔的程式碼： Hooks 讓元件更易於閱讀和理解。
• 可重複使用性： Hooks 讓您在沒有 HOC 或渲染屬性的元件之間共用邏輯。
• 更好的狀態管理：對狀態和副作用進行更精細的控制。
• 函數式元件優點： 可以在React元件中充分利用函數式程式設計。

Hooks 徹底改變了我們編寫 React 元件的方式，從基於類別的元件轉向更實用、簡潔和可重複使用的狀態管理和副作用方法。