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()方法,他返回一个数组,然后我们使用的方式,数组解构,两个参数第一个参数是值,第二个参数是改变第一个参数的值,并且第二个参数是一个方法。

相关推荐
写不来代码的草莓熊2 分钟前
SVG 图标插件误读 PNG 图片 + Vite 重启缓存失效重新生成 + 浏览器严格渲染
前端
燐妤8 分钟前
前端HTML编程3:初识CSS
前端·html5
UXbot10 分钟前
独立设计师UI设计工具推荐(2026):支持AI原型生成与代码导出的5款工具全面评价
前端·人工智能·低代码·ui·交互·产品经理·web app
anOnion34 分钟前
构建无障碍组件之Table Pattern
前端·html·交互设计
mfxcyh42 分钟前
如何把对象数据转化为数组
java·服务器·前端
编程技术手记1 小时前
Vite 开发环境前后端端口隔离:解决 index.html 冲突问题
前端·html
光影少年1 小时前
react16-react19类组件完整生命周期(挂载/更新/卸载)
前端·javascript·react.js
whinc3 小时前
Node.js技术周刊 2026年第14周
javascript·node.js
这个昵称也不能用吗?3 小时前
eas 热更新相关
前端
KaMeidebaby3 小时前
卡梅德生物技术快报|葫芦科植物遗传转化:Fast‑TrACC 工程化优化:葫芦科植物遗传转化效率提升与成本控制
前端·其他·百度·新浪微博