React useState Hook
React useState Hook 允許我們在函式元件中跟蹤狀態。
狀態通常是指應用程式中需要跟蹤的資料或屬性。
匯入 useState
要使用 useState Hook，我們首先需要將其 import 到我們的元件中。
示例
在元件的頂部，import useState Hook。
import { useState } from "react";
請注意，我們正在從 react 中解構 useState，因為它是命名匯出。
要了解有關解構的更多資訊，請檢視 ES6 部分。
初始化 useState
我們在函式元件中呼叫 useState 來初始化我們的狀態。
useState 接受一個初始狀態並返回兩個值
- 當前狀態。
- 更新狀態的函式。
示例
在函式元件的頂部初始化狀態。
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
請注意，我們再次從 useState 中解構返回的值。
第一個值 color 是我們的當前狀態。
第二個值 setColor 是用於更新我們狀態的函式。
這些名稱是變數，可以隨意命名。
最後，我們將初始狀態設定為一個空字串：useState("")
讀取狀態
現在我們可以在元件中的任何位置包含我們的狀態。
示例
在渲染的元件中使用狀態變數。
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
更新狀態
要更新我們的狀態，我們使用狀態更新函式。
我們絕不應直接更新狀態。例如：color = "red" 是不允許的。
示例
使用按鈕更新狀態
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
狀態可以包含什麼
useState Hook 可用於跟蹤字串、數字、布林值、陣列、物件以及它們的任何組合！
我們可以建立多個狀態 Hooks 來跟蹤單獨的值。
示例
建立多個狀態 Hooks
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
或者，我們也可以只使用一個狀態幷包含一個物件！
示例
建立一個包含物件的單個 Hook
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
由於我們現在跟蹤一個物件，因此在渲染元件時需要引用該物件，然後引用該物件的屬性。（例如：car.brand）
更新狀態中的物件和陣列
更新狀態時，整個狀態會被覆蓋。
如果我們只想更改汽車的顏色怎麼辦？
如果我們只調用 setCar({color: "blue"})，這將從我們的狀態中刪除品牌、型號和年份。
我們可以使用 JavaScript 展開運算子來幫助我們。
示例
使用 JavaScript 展開運算子僅更新汽車的顏色
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
因為我們需要狀態的當前值，所以我們將一個函式傳遞到我們的 setCar 函式中。該函式接收前一個值。
然後，我們返回一個物件，展開 previousState 並僅覆蓋顏色。
