useState是一个ReactHook(函数)，它允许我们向组件添加一个状态变量，从而控制组件的渲染效果
import { useState } from "react"
//使用useState实现计数器按钮
function App() {
//count是状态变量 setcount是修改变量的方法
const[count,setCount]= useState(0)
//点击事件回调
const handleClick=()=>{
//使用传入的新值修改Count，重现使用新的count来渲染UI
setCount(count+1)
}
return(
<div className="App">
<button onClick={handleClick}>{count}</button>
</div>
)
}
export default App
修改状态的规则
状态不可变，状态是自读的，我们应该是替换它而不是修改它，直接修改状态不能引发视图更新
import { useState } from "react"
//使用useState实现计数器按钮
function App() {
//count是状态变量 setcount是修改变量的方法
const[count,setCount]= useState(0)
//点击事件回调
const handleClick=()=>{
//我们直接修改这个值
count++
setCount(count)//是不会触发视图更新的
}
return(
<div className="App">
<button onClick={handleClick}>{count}</button>
</div>
)
}
export default App
修改对象状态
对于对象类型的状态数据，应该传递一个set一个全新的对象来进行修改
import { useState } from "react"
//使用useState实现计数器按钮
function App() {
//修改对象状态
const [form,setForm]=useState({name:'jack'})
const changeFOrm=()=>{
//错误的写法
// form.name='jorn'
//正确的写法
setForm({
...form,
name:'jorn'
})
}
return(
<div className="App">
<button onClick={changeFOrm}>{form.name}</button>
</div>
)
}
export default App