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

相关推荐
RopenYuan38 分钟前
FastAPI -API Router的应用
前端·网络·python
走粥1 小时前
clsx和twMerge解决CSS类名冲突问题
前端·css
Purgatory0012 小时前
layui select重新渲染
前端·layui
weixin199701080162 小时前
《中国供应商商品详情页前端性能优化实战》
前端·性能优化
九皇叔叔3 小时前
003-SpringSecurity-Demo 统一响应类
java·javascript·spring·springsecurity
赵孝正4 小时前
学习的本质是一个工程闭环:从模仿到内化的四阶段方法论(附风电实战案例)
前端·数据库·学习
低代码布道师4 小时前
纯代码实战:MBA培训管理系统 (十四) ——用户管理(批量选择与批量删除)
javascript·nextjs
Hello--_--World5 小时前
JavaScript运行机制、v8原理、js事件循环
开发语言·javascript·ecmascript