摘要

• 這篇文章的目的是 ?
• React「Custom Hooks」分享
• 連結

這篇文章的目的是 ?

分享自訂 Hooks 的重要性在於提供 React 開發者一個有效的方式，以促進代碼可讀性、可重用性和可維護性。自訂 Hooks 允許我們將複雜的邏輯和狀態管理抽象化，並與社群共享這些寶貴的資源。這不僅有助於加速應用程式開發，還能使新手更容易理解和運用 React 的強大功能。現在，讓我們深入研究七個常見的 Hooks，即 useCallback、useRef、useMemo、useReducer、useContext、useState、以及 useEffect，並提供每個 Hooks 的三個實際案例和解釋，讓您能更清楚地掌握這些強大的工具。讓我們開始吧！

React「Custom Hooks」分享

useCallback 範例：

1. 事件處理函數的優化：當您需要將事件處理函數傳遞給子組件時，使用 useCallback 可以防止不必要的重新渲染，提高性能。
2. API 請求的優化：在發送 API 請求時，使用 useCallback 可以確保相同的函數實例在渲染之間保持不變，節省資源。
3. 避免無限循環：在 useEffect 中使用 useCallback 可以避免在依賴中誤用事件處理函數，避免無限循環。

useRef 範例：

1. 控制 DOM 元素：使用 useRef 可以輕鬆地獲取和修改 DOM 元素，例如在動畫或焦點管理中。
2. 保持可變狀態：在函數組件中保持可變狀態，以避免觸發重新渲染。
3. 儲存上一次的值：使用 useRef 可以輕鬆地記錄上一次渲染中的值，用於比較。

useMemo 範例：

1. 昂貴的計算：當計算成本高昂時，使用 useMemo 可以優化性能，只在需要時重新計算。
2. 避免重複計算：將計算的結果緩存，以避免多次計算相同的值。
3. 縮短渲染時間：使用 useMemo 可以減少渲染時間，提高應用程式的反應速度。

useReducer 範例：

1. 複雜的狀態管理：當應用程式的狀態管理變得複雜時，使用 useReducer 可以幫助您更有組織地處理不同的狀態轉換。
2. 全域狀態：在多個組件之間共享全域狀態時，useReducer 提供了一種集中管理的方式，以確保一致性。
3. 撤銷和重做：使用 useReducer 可以實現撤銷和重做功能，使應用程式更強大。

useContext 範例：

1. 全域主題設定：使用 useContext 可以輕鬆實現全域主題設定，讓所有組件共享相同的外觀風格。
2. 用戶身份驗證：將用戶身份驗證狀態存儲在上下文中，以便在整個應用程式中使用，而無需手動傳遞。
3. 多語言支持：使用 useContext 可以實現多語言支持，讓應用程式支持多種語言版本。

useState 範例：

1. 本地組件狀態：使用 useState 可以輕鬆管理組件的本地狀態，例如表單輸入或模擬開關。
2. 動態 UI：在組件內部使用 useState 可以實現動態 UI，根據用戶的操作來更新界面。
3. 簡單的計數器：建立一個簡單的計數器應用程式，以演示如何使用 useState 跟蹤狀態。

useEffect 範例：

1. 資料獲取和更新：使用 useEffect 可以在組件渲染後獲取資料，並在資料更新時自動重新渲染。
2. 訂閱外部事件：建立一個訂閱外部事件的功能，例如監聽鍵盤輸入或 WebSocket 事件。
3. 動畫和過渡：使用 useEffect 可以實現動畫和過渡效果，例如淡入淡出效果。

範例 1：使用 useContext 實現全域主題設定

import React, { createContext, useContext } from 'react';

// 創建一個上下文（Context）來存儲主題設定
const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const theme = 'light'; // 這裡假設主題是"light"

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

const ThemedComponent = () => {
  // 使用 useContext Hook 獲取主題設定
  const theme = useContext(ThemeContext);

  return (
    <div className={`theme-${theme}`}>
      <p>目前主題：{theme}</p>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

解釋：

• 我們首先創建了一個名為 ThemeContext 的上下文，用於存儲主題設定。
• 然後，我們使用 useContext Hook 在 ThemedComponent 組件中獲取主題設定的值。
• 在 ThemeProvider 組件中，我們將主題值設置為 "light"，並將其通過上下文提供給所有子組件。
• 最後，在 App 組件中，我們包裹 ThemedComponent，使其可以訪問全域的主題設定。

這個範例演示了如何使用 useContext Hook 實現全域主題設定，使所有子組件都能夠訪問和使用相同的主題值。

範例 2：使用 useReducer 管理狀態

import React, { useReducer } from 'react';

// 定義一個 reducer 函數來處理狀態變化
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const Counter = () => {
  // 使用 useReducer Hook 初始化狀態和 dispatch 函數
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  // 定義處理按鈕點擊的函數，並分發對應的動作
  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <p>計數：{state.count}</p>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>減少</button>
    </div>
  );
}

export default Counter;

解釋：

• 我們定義了一個名為 counterReducer 的 reducer 函數，它處理狀態的變化，根據動作的類型進行增加或減少操作。
• 在 Counter 組件中，我們使用 useReducer Hook 初始化狀態和 dispatch 函數，並將 counterReducer 作為第一個參數傳遞。
• 我們定義了兩個按鈕點擊處理函數，每個函數都分發相對應的動作給 dispatch 函數，以更新狀態。
• 狀態的當前值（state.count）在界面上顯示，並在按鈕上設置點擊事件處理程序，以執行增加和減少操作。

這個範例演示了如何使用 useReducer Hook 來管理複雜的狀態邏輯，並使用 reducer 函數處理不同的動作。

連結

• React：https://react.dev/