seState是一个react Hook(函数)，它允许我们像组件添加一个状态变量，从而控制影响组件的渲染结果
数据驱动试图
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会随着变化(数据驱动试图)
使用 修改状态
注意：const [count,setCount ] = useState(0)和响应方法必须写在function App() {
}内
import { useState } from 'react' //引入function App() {
const [count,setCount ] = useState(0) //结构 count状态变量 setCount修改状态变量的方法
function loginbtn(type,e){setCount(count+1) //更改数据响应式}
}return (<div><button onClick={(e)=>loginbtn(1,e)}>登录</button>{count}</div>);
}export default App;修改状态规则
状态不可变
修改对象状态
import { useState } from 'react'function App() {
const [ user,setUser ] = useState({name:'张三',age:18,
})
const nameChange = ()=>{setUser({...user,name:'李四'})
}return (<div><button onClick={nameChange}>修改{user.name}</button></div>);
}export default App;
修改数组状态
import { useState } from 'react';let list = [{name:'张三',age:18},{name:'李四',age:20}
];function App() {const [lists, setLists] = useState(list);function handleClick() {const namechange = lists.map(item => {if (item.name === '张三') {// 不作改变return item;} else {return {...item,name: '王五',};}});// 使用新的数组进行重渲染setLists(namechange);}return (<div><button onClick={handleClick}>改变name</button><div/>);
}
