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

相关推荐
PBitW7 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?
前端·webpack·typescript·vite
光影少年7 小时前
react navite手写 FlatList 优化配置
前端·react native·react.js
曹牧7 小时前
C#:文本文件读取
服务器·前端·c#
柚yuzumi7 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙7 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
我爱写代码i7 小时前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
OpenTiny社区8 小时前
太酷了!装上OpenTiny dsh‑genui这个插件,你的DeepSeek Harness点击就能干活了!
前端·ai编程
用户938515635078 小时前
大模型记忆指南:从短时缓存到永久记忆,手把手带你吃透 LangChain Memory 管理
javascript·人工智能
ModyQyW8 小时前
vite-plugin-uni-pages 更新了什么
前端·uni-app
xqchen8 小时前
Web Components 普及困境深度解析:技术标准与工程实践的落差
javascript