使用 React Hooks 提升開發效率

2025/02/01

介紹 useState、useEffect、useContext 等 Hooks 的使用方式。

React Hooks 簡介

React Hooks 是 React 16.8 版本引入的新功能，允許開發者在函式組件內使用狀態與其他 React 特性。常見的 Hooks 包括 useState、useEffect 和 useContext，它們能大幅提升開發效率，讓程式碼更簡潔易維護。

useState：管理組件內的狀態

useState 是最常見的 Hook，用來管理函式組件內的狀態。例如，以下是一個簡單的計數器應用：

import { useState } from "react";

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

useState 讓我們可以在函式組件內部儲存與更新狀態，而無需使用類別組件。

useEffect：處理副作用

useEffect 主要用來處理副作用，例如 API 請求、訂閱與 DOM 操作。例如，我們可以使用 useEffect 來在組件載入時取得資料：

import { useState, useEffect } from "react";

function DataFetcher() {
const [data, setData] = useState(null);

useEffect(() => {
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => setData(data));
}, []);

return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

這樣 useEffect 會在組件掛載時執行，並在 API 回應後更新狀態。

useContext：管理全域狀態

useContext 讓我們能夠在組件之間共享狀態，而無需逐層傳遞 props。以下是一個簡單的範例，使用 useContext 來管理主題（深色模式/淺色模式）：

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

function ThemeProvider({ children }) {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}

function ThemedButton() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
切換主題（目前：{theme}）
</button>
);
}

這樣，我們可以透過 useContext 直接存取 ThemeContext，而無需手動傳遞 props。

← 上一篇: React 入門指南下一篇: React 與 TypeScript 最佳實踐 →