【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…

McCabe度量法

McCabe度量法&#xff0c;又称为环路度量&#xff08;Cyclomatic Complexity&#xff09;或循环复杂度&#xff0c;是由Thomas J. McCabe Sr.在1976年提出的一种用于软件工程中的程序复杂性度量方法。这种方法基于程序的控制流图&#xff08;Control Flow Graph, CFG&#xff0…

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…

【Daily Code】1953. 你可以工作的最大周数1974. 使用特殊打字机键入单词的最少时间

Problem: 1953. 你可以工作的最大周数 Code class Solution { public:long long numberOfWeeks(vector<int>& milestones) {// 自己想的思路是每次取出那个剩余时间最多的任务来做&#xff08;但是注意不能连着两次都取到同一个任务来做&#xff09;&#xff1b;然后…

震惊!三张图搞定企业数字化转型?开利蚓链就是这么简单!

企业数字化转型&#xff0c;听起来似乎很复杂&#xff0c;让人望而却步&#xff1f;别急&#xff01;开利蚓链数字化生态解决方案告诉你&#xff0c;只需三张图&#xff0c;就能轻松搞定开局&#xff01;一张组织目标图&#xff0c;一张市场路径图&#xff0c;一张权益分配图&a…

WindoWS内核函数 - 字符串复制

DDK提供针对ANSI_STRING字符串和UNICODE_STRING字符串的复制字符串命令&#xff0c;分别是&#xff1a; ANSI_STRING 字符串复制函数&#xff1a; VOID NTAPI RtlCopyString(IN OUT PSTRING DestinationString,IN const STRING * SourceString); // DestinationString: 目的字…

位图和布隆过滤器:位图

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

MySQL数据表的操作

数据表的专业术语 在MySQL数据库管理系统中,具体的数据都是被存储到数据库的多个数据表(table)中,数据库的表格跟excel的表格类似,都是由行(row)和列(column)组成,每一列都称为一个字段(field),列名称为字段名,每一行都称为记录(不包含头),单个单元格成为属性…

专“蜀”盛会!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…

51 单片机[2-3]:LED流水灯

摘要&#xff1a; 本文使用STC80C51RC单片机实现了LED流水灯 创建项目&#xff0c;具体方法见[2-1] 一、固定延时 #include <REGX52.H> #include <INTRINS.H>void Delay500ms() //12.000MHz {unsigned char i, j, k;_nop_();_nop_();i 23;j 205;k 120;do{do…

一些常见开发框架相关题目,RESTful是什么,Electron是什么,Express, Koa

RESTful架构 1. 什么是RESTful架构&#xff1f; REST&#xff08;Representational State Transfer&#xff09;是一种软件架构风格&#xff0c;它强调简单、无状态的接口&#xff0c;以资源为核心&#xff0c;使用统一的接口进行资源的访问。RESTful架构通常基于HTTP协议&am…

Python中的线程安全单例模式实现详解

Python中的线程安全单例模式实现详解 一、引言 在Python编程中&#xff0c;单例模式是一种常见的设计模式&#xff0c;它确保一个类仅有一个实例&#xff0c;并提供一个全局访问点来访问这个实例。然而&#xff0c;在多线程环境下&#xff0c;如果不进行适当的同步&#xff0…

Java基础复习笔记 第05章:数组

1. 数组的概述&#xff08;理解&#xff09; 1. 数组的理解概念&#xff1a; 数组(Array)&#xff0c;是多个相同类型数据按一定顺序排列的集合&#xff0c;并使用一个名字命名&#xff0c; 并通过编号的方式对这些数据进行统一管理。简称&#xff1a;多个相同类型的数据的组合…

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

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

持续总结中!2024年面试必问 100 道 Java基础面试题(四十九)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 100 道 Java基础面试题&#xff08;四十八&#xff09;-CSDN博客 九十七、请解释Java中的synchronized和volatile关键字及其用途 在Java中&#xff0c;synchronized和volatile都是用于控制线程对共享资源访问的关…

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

在现代城市中&#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;主要面向个人开发者…

Git commit-msg 提交模板配置

提交样板文件 template.txt [简述]: [解决方案]: [关联]:以命令的方式配置 git config --global commit.template ~/template.txt 执行完命令&#xff0c;多了以下内容 [commit]template C:/Users/Administrator/template.txtgit配置文件中手动配置 C:\Users\Administrator.…