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

相关推荐
Jutick1 天前
揭秘低延迟:WebSocket 实时行情如何拯救你的量化策略?——Python 生产级实现
前端
~欲买桂花同载酒~1 天前
项目优化-vite打包优化
前端·javascript·vue.js
林夕sama1 天前
多线程基础(五)
java·开发语言·前端
我叫蒙奇1 天前
husky 和 lint-staged
前端
kyriewen1 天前
JavaScript 继承的七种姿势:从“原型链”到“class”的进化史
前端·javascript·ecmascript 6
穷鱼子酱1 天前
ElSelect二次封装组件-实现分页(下拉加载、缓存)、回显
前端
科科睡不着1 天前
拆解iOS实况照片📷 - 附React web实现
前端
前端老兵AI1 天前
Electron 桌面应用开发入门:前端工程师的跨平台利器
前端·electron
胖子不胖1 天前
浅析cubic-bezier
前端
reasonsummer1 天前
【办公类-133-02】20260319_学区化展示PPT_02_python(图片合并文件夹、提取同名图片归类文件夹、图片编号、图片GIF)
前端·数据库·powerpoint