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

相关推荐
路光.6 小时前
ReferenceError:Can‘t find variable:structureClone
前端·javascript·html·vue2
前端那点事6 小时前
内存泄漏排查全指南:从场景识别到工具实操,新手也能上手
前端·vue.js
我这一生如履薄冰~6 小时前
浏览器多窗口同开一页面,数据同步更新(纯前端方案)
前端·javascript
Alice-YUE6 小时前
前端性能优化完全指南:从指标到实战
前端·学习·性能优化
Rkgua6 小时前
实例成员和静态成员在对象中的用法
javascript
Momo__6 小时前
Web Speech API 语音识别与合成详解
前端·javascript
曹牧6 小时前
Java Web:DispatcherServlet
java·开发语言·前端
FlyWIHTSKY7 小时前
在 **Element Plus 中,`el-aside` 关闭后**仍然占位置**,通常是因为 **它没有被销毁或宽度没有变为 0**。
前端·javascript·vue.js
AC赳赳老秦7 小时前
网安工程师提效:用 OpenClaw 实现漏洞扫描报告生成、安全巡检自动化、日志合规审计
java·开发语言·前端·javascript·python·deepseek·openclaw
网络点点滴7 小时前
NPM 和 package.json 文件简介
前端·npm·json