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

相关推荐
余瑜鱼鱼鱼几秒前
Thread类中run和start的区别
java·开发语言·前端
n 55!w !1081 分钟前
js练习作业
开发语言·javascript·ecmascript
计算机程序设计小李同学2 分钟前
基于位置服务的二手图书回收平台
java·前端·vue.js·spring boot·后端
Whisper_Sy3 分钟前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 月报告实现
android·开发语言·javascript·网络·flutter·ecmascript
灰灰勇闯IT3 分钟前
【Flutter for OpenHarmonyDart 入门日记】第5篇:字典类型 Map 与动态类型 dynamic 全解析
开发语言·javascript·ecmascript
雨季6666 分钟前
Flutter for OpenHarmony 入门实践:从 Scaffold 到 Container 的三段式布局构建
开发语言·javascript·flutter
Dreamy smile7 分钟前
JavaScript 继承与 this 指向操作详解
开发语言·javascript·原型模式
We་ct13 分钟前
LeetCode 14. 最长公共前缀:两种解法+优化思路全解析
前端·算法·leetcode·typescript
遗憾随她而去.17 分钟前
前端检查内存泄露
前端
HIT_Weston25 分钟前
109、【Ubuntu】【Hugo】搭建私人博客:搜索功能(五)
linux·javascript·ubuntu