基本介紹
在 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;
- 初始顏色設定為紅色
#ff0000。 - 當使用者從顏色選擇器改變顏色時，
handleColorChange會更新colorstate。 - 透過內聯樣式，更新畫面上顯示的方塊背景顏色，使其與選取的顏色一致。
