react中的数据驱动视图,useState()的使用

前端开发如今有一个很重要的思想就是数据驱动视图,数据发生变化使ui发生变化,比如一个变量count,为0显示三个按钮,为1显示一个按钮,为2显示两个按钮。这就是一个简单的数据驱动视图。

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



function App() {
  const [count, setCount] = useState(0)
  const handleClick = ()=>{
    setCount(count + 1)
  }

  return (
    <>
     

      <div>react</div>
      <button onClick={handleClick}>{count}</button>      
    </>
  )
}

export default App

这里用到了useState()方法,他返回一个数组,然后我们使用的方式,数组解构,两个参数第一个参数是值,第二个参数是改变第一个参数的值,并且第二个参数是一个方法。

相关推荐
米米商聊4 分钟前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
Younglina42 分钟前
三个晚上,我和 WorkBuddy 做了个生图网站
前端·后端·ai编程
xy34531 小时前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
技术小甜甜2 小时前
【Cursor】Skill 被标黄色警告,怎么改成合格的 SKILL.md
开发语言·javascript·ai编程·cursor·1024程序员节·ai agent·skills
陈随易2 小时前
副业搞钱点子之收入查看器
前端·后端
Profile排查笔记2 小时前
浏览器指纹逆向怎么分析:从网络请求追踪到 JavaScript 采集链
前端·人工智能·后端·自动化
hudie7652 小时前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
qetfw3 小时前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
鬼手点金3 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
Shadow(⊙o⊙)3 小时前
LangChain 自定义工具全解析:从 @tool 到 bind_tools 的完整调用链路
java·服务器·前端·1024程序员节