『Day 11』認識 React 的 State 與 useState Hook

前言

在學習 React 的過程中，有一個很有趣的體悟：React 讓我們直接描述「畫面要長什麼樣子」，而不是一步步告訴電腦「要做什麼」，這點從前面幾篇文章的討論中相信大家也慢慢感受到了。

然而，網頁不會永遠都是靜態的，使用者會點擊、輸入、選擇…，畫面必須因應這些操作而改變。但初次接觸 React 的朋友可能會發現，單純改變變數的值是不夠的。

這是因為 React 需要知道「什麼時候」以及「更新什麼」，因此我們要來認識一下 React 中另一個重要的概念：State（狀態）。

React 中的變數和 Stat

讓我們先看看如果不使用 state，想要實作一個簡單的圖片瀏覽器會遇到什麼問題：

function Gallery() {
  let index = 0;

  function handleClick() {
    index = index + 1;
  }

  return (
    <div>
      <button onClick={handleClick}>下一張</button>
      <p>目前是第 {index + 1} 張圖片</p>
    </div>
  );
}

這段程式碼看起來很合理，但實際執行時會發現：無論怎麼點擊按鈕，畫面都不會更新。這是因為：

React 重新渲染元件時，區域變數不會保留先前的值
改變區域變數不會觸發 React 重新渲染元件

useState：React 的解決方案

為了解決這個問題，React 提供了 useState 這個 Hook。它提供了兩個重要的功能：

在重新渲染之間保留資料
觸發元件的重新渲染

讓我們來改寫剛才的圖片瀏覽器：

import { useState } from 'react';

function Gallery() {
  const [index, setIndex] = useState(0);

  function handleClick() {
    setIndex(index + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>下一張</button>
      <p>目前是第 {index + 1} 張圖片</p>
    </div>
  );
}

這裡的 [index, setIndex] 使用了陣列解構的語法。useState 會回傳兩個值：

狀態變數（index）：保存目前的值
狀態設定函式（setIndex）：用於更新值並觸發重新渲染

State 的重要特性

1. 獨立性

每個元件實例都有自己的 state。這意味著，即使你在頁面上使用同一個元件多次，每個實例的狀態都是完全獨立的：

function App() {
  return (
    <div>
      <Gallery />  {/* 這個 Gallery 的 index 是獨立的 */}
      <Gallery />  {/* 這個 Gallery 的 index 也是獨立的 */}
    </div>
  );
}

2. Hook 使用規則

useState 是一個 Hook（以 “use” 開頭的特殊函式），必須遵守特定的使用規則：

只能在元件的最頂層呼叫
不能在條件式、迴圈或巢狀函式中使用
必須在 React 元件或自訂 Hook 中使用

3. 多重狀態管理

一個元件可以使用多個 state，例如：

function Profile() {
  const [age, setAge] = useState(18);
  const [name, setName] = useState('小明');
  const [isStudent, setIsStudent] = useState(true);

// ... 後續的元件邏輯
}

總結

State 是 React 中管理元件資料的核心機制。透過 useState 這個 Hook，我們可以讓元件記住資訊，並在適當的時候更新畫面。理解和善用 state，對於開發互動性強的 React 應用程式來說非常重要。