昨天我們簡單介紹了 React 的基本概念，並構建了一個簡單的組件化網頁。今天，我們將進一步深入，介紹 React 中的一個強大功能 —— State（狀態），並演示如何使用它讓網頁變得更加互動。

State 是什麼？

State 是一個組件自己維護的內部數據。當 State 發生改變時，React 會自動重新渲染該組件，並更新 UI 以反映新的狀態。這讓你的網頁能夠隨著用戶的行為變得更加動態，比如點擊按鈕後顯示不同的內容。

用個比喻來說，State 就像是你的小秘密，只有你自己知道，別人無法改變它，只有你自己可以更新它。

動手實作：讓按鈕計數

讓我們來寫一個簡單的 React 應用，按下按鈕時會更新顯示的數字，這就是 State 的魔力了！
打開App.js，然後改成以下內容：

import React, { useState } from 'react';  // 從 React 中引入 useState Hook，讓我們可以在函數組件中使用狀態管理功能

function App() {
  // 使用 useState Hook 初始化狀態變量 'count'，初始值設為 0
  // 'setCount' 是用來更新 'count' 的函數
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        {/* 主標題，顯示 "React State Example" */}
        <h1>React State Example</h1>

        {/* 顯示當前 'count' 的值，並告訴使用者按了幾次按鈕 */}
        <p>You clicked the button {count} times!</p>

        {/* 按鈕，點擊後觸發 'setCount' 函數，使 'count' 值加 1 */}
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;  // 將 App 組件作為默認導出，供其他文件引入使用

這裡我們使用了useState，這是 React 提供的Hook之一，用來在函數組件中使用狀態。useState(0)創建了一個狀態變量count，初始值為 0，並且有一個函數setCount來更新這個值。當按下按鈕時，我們調用了 setCount(count + 1)，來讓計數器增加。

只需這幾行代碼，你就能在頁面上點擊按鈕，數字會隨著點擊次數更新，這就是 State 的魔力！

再加點酷炫的功能：條件渲染

我們可以更進一步，來加點條件渲染的邏輯。比如，當按鈕被點擊 10 次時，顯示一條恭喜訊息！修改App.js如下：

import React, { useState } from 'react';  // 從 React 中引入 useState Hook

function App() {
  // 使用 useState 創建一個狀態變量 'count' 和一個更新它的函數 'setCount'
  // 初始值設為 0
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <h1>React State Example</h1>
        {/* 顯示當前點擊按鈕的次數 */}
        <p>You clicked the button {count} times!</p>
        {/* 點擊按鈕時，觸發 setCount 更新 'count'，將其值加 1 */}
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
        {/* 當 count 大於或等於 10 時，顯示恭喜訊息 */}
        {count >= 10 && <p>🎉 Congratulations! You clicked 10 times! 🎉</p>}
      </header>
    </div>
  );
}

export default App;  // 將 App 組件作為預設匯出

這裡我們使用了簡單的條件渲染，當count >= 10時，顯示一條恭喜訊息。試著點擊按鈕直到達到 10 次，你會看到有趣的變化！這樣的條件渲染可以讓你的應用更具互動性和趣味性。

結語

今天我們看到了 State 的威力，讓靜態的網頁變得更加動態和互動！用 React，管理狀態變得非常直觀，無需手動操作 DOM 或繁瑣的事件處理邏輯。

下一篇文章，我們會進一步探討如何使用 React 的useEffect Hook 來處理副作用，比如 API 請求或訂閱事件。React 的世界真是無限可能。