🎣 React Hook 完整教學：從入門到實戰

React Hook 是 React 16.8 開始引入的功能，它讓我們在 函式型元件（Function Component）中就能使用狀態（State）與生命週期（Lifecycle）邏輯，不再需要寫 class component。

---

🔰 什麼是 Hook？

Hook 是一種 JavaScript 函數，可以讓你在 React 函式元件中「勾住」React 的功能（如 state、effect、context）。

---

✅ 常見內建 Hook 一覽

Hook 名稱	功能說明
useState()	管理狀態變數
useEffect()	處理副作用（如請求 API）
useContext()	使用 Context 提供的共享狀態
useRef()	建立引用（ref）或跨渲染保持值
useMemo()	記憶運算結果避免重複計算
useCallback()	記憶函式，避免不必要的重新渲染
useReducer()	管理複雜狀態邏輯（Redux 替代品）
useLayoutEffect()	同步 effect，用於 DOM layout 前操作
useId()	自動產生唯一 ID（React 18+）
use()	React 19 新增，支援 async 渲染

---

✏️ Hook 實戰範例

1️⃣ useState() – 管理狀態

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      點了 {count} 次
    </button>
  );
}

---

2️⃣ useEffect() – 生命週期管理 / API 請求

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // 空陣列表示只執行一次

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

---

3️⃣ useRef() – 引用 DOM 或保留值

import { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>聚焦</button>
    </>
  );
}

---

🧩 自訂 Hook – 建立 reusable 狀態邏輯

// useTimer.ts
import { useEffect, useState } from 'react';

export function useTimer(start = 0) {
  const [time, setTime] = useState(start);

  useEffect(() => {
    const id = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return time;
}

// App.tsx
import { useTimer } from './useTimer';

export default function App() {
  const seconds = useTimer();
  return <p>已經過了 {seconds} 秒</p>;
}

---

💡 Hook 的 3 大規則（務必遵守）

1. 只能在最外層呼叫（不能放在 if / for 裡）

2. 只能在 函式元件 或 自訂 Hook 中呼叫

3. 所有 Hook 都應該以 use 開頭命名

---

🎯 進階 Hook 應用場景

功能	使用 Hook
記憶計算結果	useMemo()
傳遞函式給子元件避免重繪	useCallback()
使用 Context	useContext()
管理表單欄位	useState() 搭配自訂 Hook
管理全域狀態	useReducer() / useContext()

---

🔍 搭配 Hook 的常見工具

功能	工具或 Hook
表單管理	react-hook-form + useForm()
HTTP 請求	SWR, React Query, 自訂 Hook
動畫	react-native-reanimated / useSharedValue()
狀態管理	Zustand, Jotai, Redux 等

---

🧠 Hook 與元件資料流圖解

父元件 (App)
 └─ useState 控制資料
     └─ 子元件 (Counter)
         └─ 透過 props 傳入資料與更新函式
             └─ 呼叫 setState 更新父元件

這就是 React 的「單向資料流 + Hook 驅動邏輯」模型。

---

🧪 Hook 實戰練習建議

1. 製作一個可計時的倒數計時器（useTimer）

2. 建立一個表單元件（useState + useRef）

3. 使用 useEffect 拉取 API 並顯示資料

4. 自訂一個 useToggle() 開關 Hook

5. 嘗試用 useReducer() 管理購物車

---

🧾 小結：你現在應該知道的

✅ Hook 是函式元件中操作狀態、生命週期的方式
✅ 你可以用內建 Hook 管理資料，也能自訂複用邏輯
✅ 寫 Hook 最重要的是：規則正確 + 清楚命名