React useState Hook
React useState Hook 允许我们在函数组件中跟踪状态。
状态通常指的是需要在应用程序中跟踪的数据或属性。
导入 useState
要使用 useState Hook，我们首先需要将它 导入 到我们的组件中。
示例
在您的组件顶部， 导入 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 并仅覆盖颜色。
