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

相关推荐
aha-凯心几秒前
React 中没有 v-model,如何优雅地处理表单输入
前端·javascript·vue.js·react.js
lcc1874 分钟前
Vue3 其它Composition API
前端·vue.js
tsumikistep4 分钟前
【前后端】Vue 基本使用方式(下)—— 条件渲染、双向绑定、事件绑定
前端·javascript·vue.js
雨雨雨雨雨别下啦6 分钟前
【从0开始学前端】TypeScript语法总结
前端·typescript
敲敲了个代码15 分钟前
一天面了6个前端开发,水平真的令人堪忧啊
前端·javascript·学习·面试·webpack·typescript·前端框架
恋猫de小郭15 分钟前
用 AI 做了几个超炫酷的 Flutter 动画,同时又差点被 AI 气死
前端·flutter·aigc
某空m17 分钟前
【Android】组件化搭建
android·java·前端
零基础的修炼19 分钟前
[项目]基于正倒排索引的Boost搜索引擎---服务和前端模块
前端
一勺菠萝丶22 分钟前
Vue组件状态同步问题:为什么修改了DOM值,提交时还是默认值?
前端·javascript·vue.js
程序员小寒24 分钟前
【无标题】
前端·css·面试·css3