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/>
  );
}
相关推荐
雾恋1 天前
最近一年的感悟
前端·javascript·程序员
华仔啊1 天前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A1 天前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理1 天前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人1 天前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥301 天前
tua-body-scroll-lock踩坑记录
前端·javascript
解道Jdon1 天前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii1 天前
JAVA Web —— A / 网页开发基础
前端
gnip1 天前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty1 天前
基于hiprint的票据定位打印系统开发实践
javascript