useState函数

seState是一个react Hook(函数)，它允许我们像组件添加一个状态变量，从而控制影响组件的渲染效果
数据驱动试图

本质：和普通JS变量不同的是，状态变量一旦发生变革组件的视图UI也会随着变革(数据驱动试图)

 

利用 修改状态

注意：const [count,setCount ] = useState(0)和响应方法必须写在function App() {
}内

1. import { useState } from 'react' //引入
3. function App() {
4. const [count,setCount ] = useState(0)  //结构  count状态变量   setCount修改状态变量的方法
5. function loginbtn(type,e){
6.       setCount(count+1) //更改数据响应式
7.   }
8. }
9.   return (
10.     <div>
11.                 <button onClick={(e)=>loginbtn(1,e)}>登录</button>
12.      {count}
13.     </div>
14.   );
15. }
17. export default App;

复制代码

修改状态规则

状态不可变

修改对象状态

1. import { useState } from 'react'
3. function App() {
4. const [ user,setUser ] = useState({
5.   name:'张三',
6.   age:18,
7. })
8. const nameChange = ()=>{
9.   setUser({
10.     ...user,
11.     name:'李四'
12.   })
13. }
14.   return (
15.     <div>
16.      <button onClick={nameChange}>修改{user.name}</button>
17.     </div>
18.   );
19. }
21. export default App;

复制代码

 修改数组状态

1. import { useState } from 'react';
3. let list = [
4.   {name:'张三',age:18},
5.   {name:'李四',age:20}
6. ];
8. function App() {
9.   const [lists, setLists] = useState(list);
10.   function handleClick() {
11.     const namechange = lists.map(item => {
12.       if (item.name === '张三') {
13.         // 不作改变
14.         return item;
15.       } else {
16.         return {
17.           ...item,
18.           name: '王五',
19.         };
20.       }
21.     });
22.     // 使用新的数组进行重渲染
23.     setLists(namechange);
24.   }
26.   return (
27.     <div>
28.       <button onClick={handleClick}>
29.         改变name
30.       </button>
31.       
32.     <div/>
33.   );
34. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。