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

相关推荐
用户12039112947262 分钟前
LangChain 实战:让 LLM 拥有记忆与结构化输出能力
javascript·langchain·llm
Maxkim3 分钟前
「✍️JS原子笔记 」一文搞懂 call、apply、bind 特征及手写实现
前端·javascript·面试
iccb10134 分钟前
客服系统前端主题配色动态切换的一种实现思路(含代码)
前端
karshey4 分钟前
【前端】svelte支持scss,包管理器是webpack
前端·webpack·scss
A24207349305 分钟前
深入理解JS DOM:从基础操作到性能优化的全面指南
开发语言·javascript·ecmascript
Zyx20075 分钟前
手写 `new`:揭开 JavaScript 实例化背后的秘密
javascript
Можно7 分钟前
深入理解 HTML 中的 iframe:特性、用法与现代实践
前端·html
布局呆星8 分钟前
Vue 3 事件处理与列表渲染---02
前端·javascript·vue.js
漫天黄叶远飞8 分钟前
🎄2025年圣诞节,单身的我只能用 Gemini 3 “嘴遁”出了一棵赛博圣诞树
前端·人工智能·gemini
云舟吖9 分钟前
Chrome 扩展开发指南:从入门到精通 Manifest V3
前端·chrome·前端框架