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

相关推荐
张元清15 小时前
React useEventSource Hook:自带断线重连的 Server-Sent Events (2026)
javascript·react.js
光影少年15 小时前
RN 网络请求:Fetch / Axios 封装、超时、拦截器
前端·react native·react.js
学习星球15 小时前
Vue 3 实战:拆解 RealWorld 项目
前端·vue.js
铁皮饭盒16 小时前
网页端, 6.5MB人脸识别模型, 谷歌框架, 又快又准
前端·javascript·后端
xiaohaiAIgeo16 小时前
【2026年】ASHRAE 110与EN 14175通风柜测试标准对比:进口与国产品牌性能差距
java·前端·数据库·科普知识
自进化Agent智能体16 小时前
Hermes 工具与工具集——Hermes 的内置能力
javascript
用户29307509766916 小时前
TypeScript 必考题:Type 与 Interface 全面对比
前端
hunterandroid16 小时前
[鸿蒙从零到一] HarmonyOS 媒体能力实战:图片、音频与视频处理
前端
打呵欠的猫16 小时前
我让 AI 封装了一个 ImageUpload 组件,它设计的 5 层校验链路比我想的周全
前端·ai编程
AlexMaybeBot16 小时前
躺在沙发上开发 Openclaw 的移动端APP
前端·flutter