我們已經介紹了一些 React Hooks（像是 useState 和 useEffect），在今天的文章中，我們將探討 React Hooks 的工作原理以及為什麼需要遵守特定的規則來使用它們。

什麼是 React Hooks？

React Hooks 是一組特殊的函式，允許我們使用 React 的內部機制，並使用這些機制來處理狀態、副作用以及其他 React 功能。這些 Hooks 是 React 自身提供的，同時我們也可以創建自己的自定義 Hooks 來進一步擴展功能。

React Hooks 的基本規則

在使用 React Hooks 時，我們需要遵守兩個重要的基本規則，以確保它們正常運作。

1. 只能在頂層調用 Hooks

React Hooks 必須在函式元件的頂層範圍內調用，不能在迴圈、條件語句或嵌套函式中使用，這是因為 Hooks 的正確執行依賴於它們的呼叫順序，只有在相同的順序下才能正確工作。

以下是一些遵守這個規則的示例：

function App() {
  // 正確的使用方式
  const [count, setCount] = useState(0);

  // 正確的使用方式
  useEffect(() => {
  }, []);

  if (count === 10) {
    // 不正確的使用方式，不能在條件語句中使用
    const [name, setName] = useState('John');

	// 不正確的使用方式，不能在條件語句中使用
	useEffect(() => {
	}, []);
  }

  function someFunction() {
    // 不正確的使用方式，不能在嵌套函式中使用
    const [name, setName] = useState('John');

	// 不正確的使用方式，不能在嵌套函式中使用
	useEffect(() => {
	}, []);
  }
}

2. 只能在 React 函式元件中調用 Hooks

// function 元件
function FunctionComponent() {
  // 正確的使用方式
  const [count, setCount] = useState(0);
}

// class 元件
class ClassComponent extends React.Component {
  // 不正確的使用方式，不能在 class 元件件中使用 Hooks
  const [name, setName] = useState('John');
}

React 內建 Hooks

React 提供了多個內建的 Hooks，用於處理各種不同的情況，以下是一些常用的 Hooks：

1. useState：用於管理元件的內部狀態，能夠在元件中保留和更新狀態，以實現互動性和狀態管理。
2. useEffect：用於處理副作用操作，例如獲取 API 資料、執行 DOM 操作或監聽事件。這個 Hook 可以在元件渲染後執行特定操作，並處理不同生命週期的邏輯。
3. useContext：用於訪問 React 上下文，允許元件在樹狀結構中共享數據，無需手動傳遞屬性，這對全局狀態管理和狀態共享非常有用。
4. useReducer：用於管理元件中的複雜狀態邏輯，通常作為 useState 的替代方案。它允許更結構化地處理狀態更新，尤其適用於處理多個相關狀態的情況。
5. useRef：用於獲取 DOM 元素的引用，以及處理其他用途，例如儲存持久狀態或創建計時器，這個 Hook 提供了對 DOM 元素的直接訪問，同時允許在多次渲染之間保留狀態。

自定義 Hooks

除了使用 React 的內建 Hooks，我們還可以創建自己的自定義 Hooks，自定義 Hooks 是一種重用邏輯的方式，允許我們在不同的元件中共享和重用相同的邏輯。

自定義 Hooks 的名稱應該以 use 開頭，這樣 React 將可以識別它們是 Hooks，我們將在後面的單元中介紹。

// 自定義 Hooks
function useCustomHook() {
  ...
}

function App() {
  // 使用自定義 Hook
  const { ... } = useCustomHook();
}

結語

React Hooks 是一個強大的工具，它們為 React 元件提供了更多的功能和靈活性，遵守 React Hooks 的基本規則是確保它們正確運作的關鍵。

只要遵守這些規則，我們就可以在函式元件中使用狀態、生命周期方法以及其他功能，並更好地組織和重用。