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

相关推荐
ShineWinsu26 分钟前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
福兮说1 小时前
JSON 格式正确,数据就可靠吗?我用一份自编配置检查类型与空值
java·前端·json
志尊宝2 小时前
AI原生前端开发(009):AI辅助性能分析与优化建议
人工智能·react.js·ai-native
程序员老赵3 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
Swot3 小时前
Asciidoctor 公式数字下标错位问题:原因分析与解决方案
前端
Swot3 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
狒狒AI3 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测:代码渲染知识视频的选栈方法(附开源技能)
前端·人工智能·aigc
修炼的dance3 小时前
浏览器里导出H.265,8.5秒和55.5秒差在硬件
前端
补码缩写3 小时前
WebCodecs选编码器,探测之后还要验解码和播放
前端
大文说跨境3 小时前
亚马逊多账号管理浏览器怎么选?云登/紫鸟/AdsPower 对比
java·前端·自动化