React State：讓元件擁有記憶
在 React 的世界裡，Props 負責從父元件向子元件傳遞資料，而 State 則是負責管理元件自身的內部資料。
State 就像元件的記憶，可以儲存元件的狀態，並根據狀態的變化來更新 UI。
什麼是 State？
State 是元件的內部狀態，用於儲存元件的資料。與 Props 不同的是，State 由元件自己管理。
State 的作用是：
- 儲存元件的資料： 元件可以使用 State 來儲存自身的資料，例如輸入框的內容、按鈕的點擊次數、下拉選單的選擇值等等。
- 控制元件的行為： 元件可以根據 State 的值來改變自身的行為，例如顯示或隱藏某些內容、啟用或停用某些功能等等。
- 更新 UI： 當 State 的值發生改變時，React 會自動重新渲染元件，更新 UI，讓使用者看到最新的狀態。
State 的初始化與更新 : useState Hook
在過去，只有類別元件 (Class Components) 才能夠擁有 State，並且需要使用 this.state 和 this.setState() 方法來管理 State。
但隨著 React Hooks 的引入，函式元件 (Functional Components) 也能夠方便地使用 State，並且更加簡潔易懂。
useState 是一個 React Hook，用於在函式元件中添加 State。它接收一個初始值作為參數，並返回一個包含 State 值和更新 State 函式的陣列。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 初始化 count 的值為 0
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
- useState(0)：初始化 count 的值為 0。
- const [count, setCount] = useState(0)：
- count：State 的值。
- setCount：更新 State 值的函式。
- setCount(count + 1)：將 count 的值加 1，並更新 State。
State 的更新注意事項
- 不要直接修改 State： 應該使用 setCount() 函式來更新 State，而不是直接修改 count 的值。
const [count, setCount] = useState(1); // 初始值為 1
count = 100 // 錯誤語法，你不可以直接修改數值
setCount(100) // 正確語法，修改數值只能透過 useState 賦予的第二個參數
- State 的更新可能是非同步的： 如果在同一個事件處理函式中多次呼叫 setCount()，React 可能會將這些更新合併成一次更新。
State 的提升 (Lifting State Up)
當多個元件需要共享同一個 State 時，可以將 State 提升到它們的共同父元件中。這樣，父元件就可以透過 Props 將 State 傳遞給子元件，並且子元件可以透過呼叫父元件傳遞的函式來更新 State。
總結
React State 讓元件擁有記憶，是賦予 UI 動態生命的重要機制。透過 State，元件可以儲存自身的資料，控制自身的行為，並且根據 State 的變化來更新 UI。