useState函数

seState是一个react Hook(函数),它允许我们像组件添加一个状态变量,从而控制影响组件的渲染结果

数据驱动试图

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

使用 修改状态

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

}内

javascript 复制代码
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;

修改状态规则

状态不可变
修改对象状态
javascript 复制代码
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;
修改数组状态
javascript 复制代码
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/>
  );
}
相关推荐
quweiie38 分钟前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20183 小时前
Ruby如何采集直播数据源地址
前端·chrome