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 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮7 分钟前
webpack基础
前端·webpack
YongGit26 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc