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 分钟前
RAG--检索增强生成--原理及实战
前端·人工智能
空中海6 分钟前
04 工程化、质量体系与 React 生态
前端·ubuntu·react.js
空中海15 分钟前
03 性能、动画与 React Native 新架构
react native·react.js·架构
好运的阿财37 分钟前
OpenClaw工具拆解之host_workspace_write+host_workspace_edit
前端·javascript·人工智能·机器学习·ai编程·openclaw·openclaw工具
XiYang-DING1 小时前
JavaScript
开发语言·javascript·ecmascript
ffqws_2 小时前
Spring Boot 接收前端请求的四种参数方式
前端·spring boot·后端
空中海2 小时前
02 React Native状态、导航、数据流与设备能力
javascript·react native·react.js
是安迪吖2 小时前
企业资产管理系统练习
前端·ai
zhouwy1132 小时前
AI 编程工具结合 Figma MCP 实现前端设计高保真还原
前端·人工智能·figma
kyriewen2 小时前
WebAssembly:前端界的“外挂”,让C++代码在浏览器里跑起来
前端·c++·webassembly