一、state 的概念與用途

在 React 中，state（狀態） 是用來存放會隨著使用者操作而改變的資料。

與一般變數不同的是：

當 state 改變時，React 會自動重新渲染（re-render）對應的畫面。

這樣一來，畫面就能即時反映資料變化，而不需要手動更新。

二、以點擊次數為例

function MyComponent() {
  let clicks = 0;

  const handleClick = () => {
    clicks++;
    console.log(clicks);
  };

  return (
    <button onClick={handleClick}>
      點擊次數：{clicks}
    </button>
  );
}

畫面上顯示「點擊次數：0」，點擊後雖然 console.log 會印出遞增的數字（1、2、3...），

但畫面上的數字不會變。

這是因為一般變數改變時，React 不會重新渲染畫面。

若希望網頁元素隨著點擊更新，就必須使用 state。

三、使用 useState 讓畫面隨資料更新

import { useState } from "react";

function MyComponent() {
  const [clicks, setClicks] = useState(0);

  const handleClick = () => {
    setClicks(clicks + 1);
    console.log(clicks);
  };

  return (
    <button onClick={handleClick}>
      點擊次數：{clicks}
    </button>
  );
}

說明：

• useState(0)：建立一個初始值為 0 的 state。
• clicks：state 目前的值。
• setClicks：用來更新 state 的函式。

當呼叫 setClicks() 改變值時，React 會自動重新渲染畫面，

因此按鈕文字「點擊次數」會即時更新。

四、useState 的結構與解構賦值

useState() 會回傳一個陣列：

1. 第一個元素是 state 的內容
2. 第二個元素是 更改 state 的函式

const [clicks, setClicks] = useState(0);

這裡的陣列解構順序很重要，

第一個代表目前的狀態值，第二個代表更新函式。

例如：

setClicks(clicks + 1);

代表將 clicks 目前的值加 1，並更新畫面。

五、render（渲染）的兩種狀態

React 的畫面更新流程分成兩種：

1. 初次渲染（Initial Render）

   元件第一次載入畫面時執行。

2. 重新渲染（Re-render）

   當 state 改變或 props 更新時，React 會重新執行該元件的函式，

   並更新需要變動的部分。

六、不同元件之間的 state 是互相獨立的

function App() {
  return (
    <>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </>
  );
}

以上面點擊按鈕為例：

每個 <MyComponent /> 都有自己獨立的 state。

按下第一個按鈕只會影響它自己，不會改變其他兩個元件的數值。

這是因為每個元件的 state 都在自己的作用域中維護。

七、將 state 傳遞給子元件

有時候希望子元件也能顯示或使用父元件的 state，

就可以透過 props 傳遞下去。

import { useState } from "react";

function ChildComponent({ clicks }) {
  return <div>{clicks}</div>;
}

function MyComponent() {
  const [clicks, setClicks] = useState(0);

  const handleClick = () => {
    setClicks(clicks + 1);
  };

  return (
    <>
      <button onClick={handleClick}>
        點擊次數：{clicks}
      </button>
      <ChildComponent clicks={clicks} />
    </>
  );
}

當 clicks 更新時，

React 不僅會重新渲染 MyComponent，

也會更新 ChildComponent

學習影片出處：https://youtu.be/aBTiZfShe-4?si=Igb2aKz3sefA97A5