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 小时前
万少用9个AI工具,帮朋友完成了一个"不可能"的项目
前端
小小小小宇4 小时前
Vue `import` 为什么可以异步加载
前端
WMYeah4 小时前
【无标题】
前端·rust·抽奖程序·跨平台抽奖程序
Unbelievabletobe4 小时前
免费外汇api的响应时间在不同时段下的波动分析
大数据·开发语言·前端·python
大哥,带带弟弟4 小时前
Grafana 前端嵌入与 JWT 鉴权实战
前端·grafana
小小小小宇4 小时前
前端 V8 引擎垃圾回收机制与内存问题排查
前端
前端老石人4 小时前
CSS 值定义语法
前端·css
sheeta19984 小时前
Vue 前端基础笔记
前端·vue.js·笔记
小小小小宇4 小时前
GitLab + GitLab Runner + Qiankun 微前端 + Nginx + Node 中间件 前端开发机从零搭建 CI/CD 全流程
前端
前端那点事4 小时前
别再写垃圾组件!Vue3 如何设计「真正可复用」的高质量通用组件
前端·vue.js