React的useState的基础使用

import {useState} from 'react'

// 1.调用useState添加状态变量

// count 是新增的状态变量

// setCount 修改状态变量的方法

// 2.添加点击事件回调

复制代码
// userState实现计数实例

import {useState} from 'react'

// 使用组件
function App() {

  // 1.调用useState添加状态变量
  // count  是新增的状态变量
  // setCount  修改状态变量的方法
  const [count,setCount]=useState(10);
  // 2.添加点击事件回调
  const handelClick=()=>{
    setCount(count+1);
  }

  return (
    <div className="App">
      {/* 动态渲染组件 */}
      <button onClick={handelClick}>{count}</button>
    </div>
  );
}
export default App;

上图举例

复制代码
import {useState} from 'react'

// 使用组件
function App() {

  const [userInfo,setUserInfo]=useState({
    'age':10,'name':'菲菲'
  });
  // 2.添加点击事件回调
//(...userInfo   表示当前的变量对象,)
//(age:userInfo.age+1   age是对象中的一个属性  如果重名就是修改对象中的重名属性值)
  const handelClick1=()=>{
    setUserInfo({
      ...userInfo,
      age:userInfo.age+1
    });
  }

  return (
    <div className="App">
      {/* 动态渲染组件 */}
      <h1>对象的的动态修改</h1>
      <button onClick={handelClick1}>{userInfo.age}</button>
    </div>
  );
}
export default App;
相关推荐
Keepreal4966 小时前
pdf文件预览实现
javascript·react.js
简小瑞6 小时前
VSCode源码解密:一行代码解决内存泄漏难题
前端·设计模式·visual studio code
邢行行6 小时前
Node.js 核心模块与模块化笔记
前端
Asort6 小时前
JavaScript设计模式(九)——装饰器模式 (Decorator)
前端·javascript·设计模式
Man6 小时前
🔥 Vue3 动态 ref 黑科技:一招解决 v-for 中的组件引用难题!
前端·vue.js
接着奏乐接着舞。6 小时前
3D地球可视化教程 - 第3篇:地球动画与相机控制
前端·vue.js·3d·threejs
小小前端_我自坚强6 小时前
2025WebAssembly详解
前端·设计模式·前端框架
用户1412501665276 小时前
一文搞懂 Vue 3 核心原理:从响应式到编译的深度解析
前端
正在走向自律6 小时前
RSA加密从原理到实践:Java后端与Vue前端全栈案例解析
java·前端·vue.js·密钥管理·rsa加密·密钥对·aes+rsa
我是天龙_绍6 小时前
Lodash 库在前端开发中的重要地位与实用函数实现
前端