【React】如何让函数式组件也能使用state——useState(Hooks)

React的函数式组件不同于类式组件,函数式组件没有自己的 this,看似没有操作state的能力
但是React官方提供了一个Hooks叫useState,它解决了函数式组件和类式组件的差异,让函数式组件拥有了类式组件所拥有的 state ,同时新增了一些 API ,让函数式组件,变得更加的灵活
例子:

function Demo() {const [count, setCount] = React.useState(0)console.log(count, setCount);function add() {setCount(count + 1)}return (<div><h2>当前求和为:{count}</h2><button onClick={add}>点我加1</button></div>)
}
export default Demo

这里利用了useState,让函数式组件能够维护自己的 state ,它接收一个参数,作为初始化 state 的值,赋值给 count。

我们可以看输出count和setCount的结果,我们可以理解为 setState 来使用:在这里插入图片描述
count 是初始化的值,而 setCount 就像是一个 action 对象驱动状态更新,我们可以通过 setCount 来更新 count 的值

这里可能有人会有疑问,usestate不会在每次调用都把count赋0吗,答案是不会,它只会在count初始化时赋值为0.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13350.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在win10折腾Flowise:部署和尝试

Flowise 是一种低代码/无代码拖放工具&#xff0c;旨在让人们轻松可视化和构建 LLM 应用程序。 本地部署 操作系统&#xff1a; win10 由于网络、操作系统等各种未知问题&#xff0c;使用npm install -g flowise的方式&#xff0c;尝试了很多次&#xff0c;都没有部署成功&am…

Visual C++界面开发组件Xtreme Toolkit Pro v24测试版发布——完全支持SVG

Codejock软件公司的Xtreme Toolkit Pro是屡获殊荣的VC界面库&#xff0c;是MFC开发中最全面界面控件套包&#xff0c;它提供了Windows开发所需要的11种主流的Visual C MFC控件&#xff0c;包括Command Bars、Controls、Chart Pro、Calendar、Docking Pane、Property Grid、Repo…

位图和布隆过滤器:位图

在《unordered_map 和 unordered_set》 中提到过&#xff1a; 哈希是一种思想&#xff0c;通过哈希函数将数据转化为一个或多个整型 —— 映射关系&#xff1b;通过这种映射关系&#xff0c;可以做到以 O(1) 的时间复杂度查找数据。 本文即将介绍的 位图 和 布隆过滤器 就是两个…

专“蜀”盛会!CGT Asia 2024 第六届亚洲细胞与基因治疗创新峰会(成都站)7月火热相邀

在细胞与基因治疗领域&#xff0c;我们正站在一个科技革命的风口上。中国的CGT市场预计将持续快速增长。根据相关分析&#xff0c;预计到2025年整体市场规模将达到25.9亿美元&#xff0c;显示出276%的复合年增长率。这一增长趋势预计将持续到2030年&#xff0c;细胞与基因治疗领…

【前端】TypeScript--未整理

概念 安装 npm install -g typescript 检查版本 tsc -v tsc 类型

redis-stack部署概要

第一步&#xff0c;下载redis-stack 下载链接&#xff1a;Downloads - Redis 第二步&#xff0c;redis安装包解压缩 gzip -d redis-stack-server-7.2.0-v10.rhel8.x86_64.tar.gz tar -xvf redis-stack-server-7.2.0-v10.rhel8.x86_64.tar 第三步&#xff0c;编辑etc下的redis…

IC设计企业如何实现安全便捷的芯片云桌面跨网摆渡?

IC设计企业&#xff0c;主要专注于集成电路的设计。这些企业通常包括集成电路、二极管、三极管和特殊电子元件等产品的设计和生产。IC设计企业在其运营和产品设计过程中&#xff0c;会涉及和产生多种文件&#xff0c;如&#xff1a; 项目需求文档&#xff1a;这是项目启动的基础…

停车场车位引导管理系统工作原理是什么,由哪些软硬件设备组成?

在现代城市中&#xff0c;随着汽车保有量的持续增长&#xff0c;停车难成为了许多城市面临的共同问题。有效管理停车场资源&#xff0c;提高车位利用率&#xff0c;减少寻找停车位的时间&#xff0c;对于缓解交通拥堵、提高城市运行效率具有重要意义。车位引导管理系统正是为了…

谷歌举办Gemini API开发者大赛;ChatGPT iOS版更新支持中文

&#x1f989; AI新闻 &#x1f680; 谷歌举办Gemini API开发者大赛&#xff0c;大奖1981款电动DeLorean 摘要&#xff1a;IT之家 5 月 15 日消息&#xff0c;在 2024 年谷歌 I/O 开发者大会上&#xff0c;谷歌宣布举办 Gemini API 开发者大赛&#xff0c;主要面向个人开发者…

24长三角数学建模ABC题已出!!!

需要ABC题资料的宝子们可以进企鹅 赛题如下&#xff1a; 赛道 A&#xff1a;“抢救”落水手机 上有天堂&#xff0c;下在苏杭&#xff1b;五一假期&#xff0c;杭州西湖、西溪湿地、京杭大运河等著名 景点&#xff0c;游人如织&#xff0c;作为享誉国内外的旅游胜地&#xff0…

图形程序复用新纪元 探讨云库安全分享计划

在公司的开放式办公室中&#xff0c;卧龙与凤雏相邻而坐。周围的同事们都在忙碌地工作&#xff0c;键盘敲击声不绝于耳。卧龙眉头紧锁&#xff0c;全神贯注地调试着复杂的代码&#xff0c;仿佛在挑战编程世界的极限。而凤雏则在完成了一段代码编写后&#xff0c;轻松地伸展着身…

联丰策略股票官网分析A股三大指数集体收跌,超3800只股票下跌

查查配今日A股三大指数集体收跌。沪指低开低走,午后A股上了微博热搜。 联丰策略拥有一支由知名互联网公司和国内证券金融机构的行业专家组成的一流运营团队。凭借他们在互联网产品开发和金融风险管理方面的丰富经验,我们的团队致力于为客户提供专业和个性化的证券交易服务。 截…

Java环境搭配(一)JDK下载以及介绍、path环境变量配置

目录 JDK Development Kit &#xff08;JDK&#xff09; 下载 JDK介绍 &#xff1a; JDK 包括以下主要组件 配置path环境变量 在cmd上打印Helloworld JDK Development Kit &#xff08;JDK&#xff09; 下载 下载官方地址 www.oracle.com 进入网址后&#xff1a; 点击产…

SpringAI应用开发

一、人工智能简述 四次工业革命推动了人类社会发展和变革&#xff1a; 蒸汽时代&#xff0c;发生在18世纪60年代~19世纪中期&#xff08;大约是1760年到1860年&#xff09;&#xff0c;这一时期的特点是机械化生产和大规模生产。电气时代&#xff0c;发生在19世纪下半叶~20世纪…

【C语言深度解剖】(12):C语言库函数的学习和模拟实现,一篇文章就够了!

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏链接查看&…

第十七篇:数据库性能优化的数学视角:理论与实践的融合

数据库性能优化的数学视角&#xff1a;理论与实践的融合 1. 引言 在现代信息技术快速发展的背景下&#xff0c;数据库性能优化已经成为计算机科学领域的一个热点问题。随着数据量的爆炸式增长和用户需求的多样化&#xff0c;数据库系统所承载的数据处理任务变得越来越复杂&…

Redis第17讲——Redis zset结构实现滑动窗口限流

一、什么是滑动窗口限流 滑动窗口限流是一种流量控制策略&#xff0c;用于控制在一定时间内允许执行的操作数量或请求频率。它的工作方式类似于一个滑动时间窗口&#xff0c;对每个时间窗口的请求数量进行计数&#xff0c;并根据预先设置的限流策略来限制或调节流量&#xff0…

maven deploy项目发布到中央仓库GPG签名失败signing failed: No secret key

maven deploy项目发布到中央仓库GPG签名失败signing failed: No secret key 执行操作 在我执行命令打包项目到中央仓库时失败 mvn clean deploy错误信息 [INFO] --- gpg:3.1.0:sign (sign-artifacts) LocalCache --- [INFO] Signing 4 files with 9961AA14xxxxxxxxxxxxxxD…

Ps 滤镜:彩色铅笔

Ps菜单&#xff1a;滤镜/滤镜库/艺术效果/彩色铅笔 Filter Gallery/Artistic/Colored Pencil 彩色铅笔 Colored Pencil滤镜用于模拟用彩色铅笔手绘的艺术效果&#xff0c;它能够在纯色背景上重新绘制图像&#xff0c;同时保留边缘细节并显示出粗糙的阴影线。此滤镜特别适合用于…

STM32HAL库-中断篇

中断 中断简介 中断是一种事件处理机制&#xff0c;可以暂停主程序的运行&#xff0c;转而处理特定事件程序。 中断的作用和意义&#xff1a; 实时控制 在确定事件内对响应事件做出相应 故障处理 检测到故障需要第一时间处理 数据传输 如串口通信&#xff0c;不确定数…