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

基本介紹

在 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」的意思。

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

1. 將 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。

2. 改變輸入框內容的例子

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。
• 畫面中會即時顯示最新輸入的內容。

3. 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;

• 初始顏色設定為紅色 #ff0000。
• 當使用者從顏色選擇器改變顏色時，handleColorChange 會更新 color state。
• 透過內聯樣式，更新畫面上顯示的方塊背景顏色，使其與選取的顏色一致。