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

相关推荐
拓荒牛儿12 小时前
前端内存可观测实践
前端
yqcoder12 小时前
异步的魔法:深入解析 async/await 原理与编译本质
前端·javascript
iiiiyu12 小时前
面向对象和集合编程题
java·开发语言·前端·数据结构·算法·编程语言
taocarts_bidfans12 小时前
2026跨境SaaS工具选型指南:Taoify与Shopify/Shopyy/Ueeshop深度对比
java·前端·javascript·跨境电商·独立站
环信12 小时前
环信Flutter UIKit适配鸿蒙实战指南
前端
秋秋202312 小时前
做了个 AI 对话页面才发现,流式渲染没想象中那么简单
前端·aigc
环信12 小时前
HarmonyOS Flutter 键盘高度监听插件开发完全指南
前端
真夜12 小时前
开发正常但生产异常的 Bug:Vite manualChunks 循环依赖导致 ReferenceError
前端·前端框架·vite
用户114818678948412 小时前
Vue 开发者快速上手 Flutter(四)
前端
dreamsever12 小时前
OpenTelemetry可观测系统之Metrics学习
java·前端·学习