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

相关推荐
糕冷小美n1 天前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥1 天前
Technical Report 2024
java·服务器·前端
沐墨染1 天前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion1 天前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks1 天前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼1 天前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴1 天前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
shadow fish1 天前
react学习记录(三)
javascript·学习·react.js
小疙瘩1 天前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git1 天前
浏览器 API 兼容性解决方案
前端·笔记·学习