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

相关推荐
xiaokangzhe几秒前
web技术与nginx网站环境部署
运维·前端·nginx
小奶包他干奶奶2 分钟前
什么是原型链(Prototype Chain)?proto和prototype的关系与区别是什么?
前端·javascript
Access开发易登软件6 分钟前
在 Access 实现标签输入控件:VBA + HTML 混合开发实战
前端·数据库·信息可视化·html·excel·vba·access
studyForMokey7 分钟前
【跨端技术ReactNative】JavaScript学习
android·javascript·学习·react native·react.js
૮・ﻌ・17 分钟前
Nodejs - 02:模块化、npm、yarn、cnpm
前端·npm·node.js·express·yarn·cnpm·包管理工具
大雷神17 分钟前
HarmonyOS APP<玩转React>开源教程十:组件化开发概述
前端·react.js·开源·harmonyos
小小小小宇22 分钟前
React useMemo 深度源码解析
前端
tiany52424 分钟前
养虾记录-如何配置多agent和多个飞书机器人独立对话
java·前端·飞书
踩着两条虫27 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十四):扩展与定制之插件系统开发指南
前端·vue.js·ai编程
我命由我1234529 分钟前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js