基本介紹

React State：深入淺出教學與最佳實務

電資鼠

發佈於前端網頁程式設計入門

更新於 2025/03/03發佈於 2025/03/03閱讀時間約 8 分鐘

基本介紹

在 React 中，state 是元件用來儲存會隨著使用者操作或事件改變而改變的「內部資料」。當 state 改變時，React 會重新渲染函式元件，以便 UI 與最新的資料保持同步。下面我們來說明如何使用 state。

總結兩點:

state 是組件內部的數據，用於保存動態資料。
當 state 改變時，React 會重新渲染組件，也就是會更新html的顯示。

範例:

import React, { useState } from 'react';

function Counter() {
  // 宣告一個 state 變數 count，初始值設為 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>目前的計數：{count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        增加
      </button>
    </div>
  );
}

export default Counter;

useState(0)：這裡傳入的 0 為 count 的初始值。
[count, setCount]：count 為目前的 state 值，setCount 是用來更新 count 的函式，一定要使用setCount來變更count的狀態。
每當點擊按鈕，setCount(count + 1) 就會更新 count，React 會重新渲染元件，並顯示最新的 count 值。
當你呼叫 setCount時，React 可能不會立即更新 state，而是批次更新，這點在計算新的 state 時要特別注意。如果依賴舊的 state 值來計算新的 state，可以使用上述程式碼中的寫法：
至於為甚麼: 當你呼叫 setCount 時，React 會將更新排入一個更新隊列，並在稍後批次處理這些更新，而不是立即更新 state。這樣做有助於提升效能，因為可以將多個更新合併後再一起渲染。為了避免這種情況，React 提供了可以接收上一個 state 值的函式寫法：

setCount(prevCount => prevCount + 1);

這樣，React 會保證 prevCount 是最新的 state 值，即使多個更新被批次處理，每一次的更新都會基於正確的先前 state 值。這就是「依賴舊的 state 值來計算新的 state」的意思。

下面提供三個例子，分別展示如何：

將 set 函式作為工具函式放入其他函式中:

import React, { useState } from 'react';

// 根據傳入的 amount 更新 state
function updateValue(setValue, amount) {
  setValue(prevValue => prevValue + amount);
}

function CounterUtility() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>目前計數：{count}</p>
      <button onClick={() => updateValue(setCount, 1)}>
        增加
      </button>
      <button onClick={() => updateValue(setCount, -1)}>
        減少
      </button>
    </div>
  );
}

export default CounterUtility;

updateValue 接收 setValue 和一個數字 amount，利用函式寫法確保每次更新基於最新的 state。
在元件中，按下「增加」或「減少」按鈕時，呼叫 updateValue，依照指定的數值更新 count。

改變輸入框內容的例子

import React, { useState } from 'react';

function TextInputExample() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    // event.target.value 是輸入框當前的值
    setText(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}  // 當輸入框內容改變時呼叫 handleChange
        placeholder="請輸入文字"
      />
      <p>你輸入的是：{text}</p>
    </div>
  );
}

export default TextInputExample;

利用 useState 初始化 text 為空字串。
每當使用者輸入或改變元素的值時，onChange事件就會觸發，並傳入一個合成事件物件。
當輸入框內容改變時，handleChange 會被觸發，從 event 中取出最新的值並呼叫 setText 更新 state。
畫面中會即時顯示最新輸入的內容。

Color picker 顏色選擇器項目

import React, { useState } from 'react';

function ColorPicker() {
  // 初始顏色設定為紅色
  const [color, setColor] = useState('#ff0000');

  const handleColorChange = (event) => {
    setColor(event.target.value);
  };

  return (
    <div>
      <h2>選擇一個顏色</h2>
      <input
        type="color"
        value={color}
        onChange={handleColorChange}
      />
      <p>目前選取的顏色：{color}</p>
      <div
        style={{
          width: '100px',
          height: '100px',
          backgroundColor: color,
          border: '1px solid #000',
          marginTop: '10px'
        }}
      >
      </div>
    </div>
  );
}

export default ColorPicker;