概念：useState 是一個React Hook（函數），它允許我們向組件添加狀態變量，從而影響組件的渲染結果。

本質：和普通JS變量不同的是，狀態變量一旦發生變化，組件的視圖UI也會跟著變化（數據驅動視圖）。react沒有雙向綁定，所以要使用useState，vue可以直接使用變量 就會雙向綁定。

// 用useState給組件添加狀態變量，以實現一個計數器按鈕
import { useState } from "react";function App() {//第一步，調用useState添加一個狀態變量//count是狀態變量，setCount是用來修改狀態變量的方法，其參數為狀態變量的初值const [count, setCount] = useState(0);//第二步，點擊事件調用setCount方法//作用：1、用傳入的新值修改count 2、重新用新的count渲染UIconst handleClick = () => {setCount(count + 1);};return (<div className="App"><button onClick={handleClick}>{ count }</button></div>);
}export default App;

修改狀態的規則

規則：在React中，狀態被認為是只讀的，我們應該始終替換它而不是修改它，直接修改狀態不能引發視圖更新。

?修改對象狀態

規則：對于對象類型的狀態變量，應該始終傳給set方法一個全新的對象來進行修改。

// 用useState給組件添加狀態變量，以實現一個計數器按鈕
import { useState } from "react";function App() {const [count, setCount] = useState(0);const handleClick = () => {setCount(count + 1);};//修改對象狀態const [form, setForm] = useState({name: 'jack'});const changeForm = () => {//setForm()函數會用新對象替換舊對象, 但是這里新對象相對于老對象只是修改了name屬性, 其他屬性保持不變//...是展開運算符, 用來把form對象的所有鍵值對展開到新對象中. 然后重新設置了name屬性setForm({...form, name: 'rose'});}return (<div className="App"><button onClick={handleClick}>{count}</button><button onClick={changeForm}>修改對象狀態 {form.name}</button></div>);
}export default App;