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;
相关推荐
华洛1 分钟前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 分钟前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔1 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗1 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗1 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥1 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial1 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front1 小时前
面试是一门学问
前端·面试
90后的晨仔1 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔1 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js