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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Golang | Leetcode Golang题解之第92题反转链表II

题目&#xff1a; 题解&#xff1a; func reverseBetween(head *ListNode, left, right int) *ListNode {// 设置 dummyNode 是这一类问题的一般做法dummyNode : &ListNode{Val: -1}dummyNode.Next headpre : dummyNodefor i : 0; i < left-1; i {pre pre.Next}cur :…

vue2人力资源项目9权限管理

页面搭建 <template><div class"container"><div class"app-container"><el-button size"mini" type"primary">添加权限</el-button><el-table-column label"名称" /><el-table-co…

DS高阶:跳表

一、skiplist 1.1 skiplist的概念 skiplist本质上也是一种查找结构&#xff0c;用于解决算法中的查找问题&#xff0c;跟平衡搜索树和哈希表的价值是一样的&#xff0c;可以作为key或者key/value的查找模型。skiplist是由William Pugh发明的&#xff0c;最早出现于他在1990年发…

商品服务:SPUSKU规格参数销售属性

1.Object划分 1.PO&#xff08;Persistant Object&#xff09;持久对象 PO就是对应数据库中某个表中的一条记录&#xff0c;多个记录可以用PO的集合。PO中应该不报含任何对数据库的操作 2.DO(Domain Object) 领域对象 就是从现实世界中抽象出来的有形或无形的业务实体。 3…

蓝队技术 | 使用Sysmon日志识别和分析Windows恶意活动

在这篇文章中&#xff0c;我们将演示如何使用Sysmon日志来分析和了解恶意软件的各种行为&#xff0c;其中包括如何通过Firefox从Dropbox下载、运行、并使用Windows工具进行安装。本文将介绍Sysmon日志中各种有用的Event ID&#xff0c;以及如何识别和分析Windows操作系统上的恶…

(五)Spring教程——Spring IoC容器(上)

在Spring框架中&#xff0c;Bean的实例化和组装都是IoC容器配置元数据完成的。Spring框架提供的容器主要是基于BeanFactory和ApplicationContext两个接口&#xff0c;一种是实现BeanFactory接口的简单容器&#xff0c;另一种是实现ApplicationContext接口的高级容器。 BeanFact…

嵌入式开发十五:STM32中断系统

STM32 中断非常强大&#xff0c;几乎每个外设都可以产生中断&#xff0c;因此这里我们单独来介绍它&#xff0c;为后面介绍外设中断做铺垫。 目录 一、中断的介绍 1.1 中断的概念 1.2 中断优先级: 1.3 中断的嵌套 1.4 内部中断和外部中断 1.5 中断响应和事件响应 1.6 …

【C语言】指针(二)

目录 一、传值调用和传址调用 二、数组名的理解 三、通过指针访问数组 四、一维数组传参的本质 五、指针数组 六、指针数组模拟实现二维数组 一、传值调用和传址调用 指针可以用在哪里呢&#xff1f;我们看下面一段代码&#xff1a; #include <stdio.h>void Swap(i…

2005-2022年全国及各省绿色信贷水平测算数据(含原始数据+计算过程+计算结果)

2005-2022年全国及各省绿色信贷水平测算数据&#xff08;含原始数据计算过程计算结果&#xff09; 1、时间&#xff1a;2005-2022年 2、来源&#xff1a;工业统计年鉴、统计年鉴、其中2017年采用插值法填补 3、范围&#xff1a;31省 4、方法说明&#xff1a;选取各省六大高…

HTML静态网页成品作业(HTML+CSS)——动漫喜羊羊网页设计制作(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…

R实验 基础(二)

实验目的&#xff1a; 掌握向量的几种类型&#xff1a;数值向量、逻辑向量、字符向量、复数向量&#xff1b;掌握生成向量几个的函数使用和向量的下标运算&#xff1b;掌握因子的定义和相关函数的使用。 实验内容&#xff1a; R语言中&#xff0c;数值向量用得非常多。生成数…

QT多线程的使用

目录 一.介绍 二.第一种多线程方式 1.创建一个线程子类&#xff0c;继承QT中的QThread 2.重新父类的run( )方法 3.在线程中创建子线程对象 4.run( )方法 5.启动子线程 三.第二种多线程方式 1.创建一个新类&#xff08;这个类是QObject的派生&#xff09; 2.在这个类中…

宝塔助手是以宝塔Linux面板提供的API开发的一款可以随时随地管理服务器的APP

【软件介绍】手机操控云服务器的神器软件&#xff0c;本人亲测在用&#xff0c;好用极了&#xff01; 【软件名称】宝塔助手 【软件包名】com.lensyn.zsbt 【软件版本】1.4.1 【软件大小】29.00M 【适用系统】安卓 【软件特色】宝塔助手是以宝塔Linux面板提供的API开发的一款可…

centos无法联网解决方案(9步完成

1.打开终端&#xff0c;输入 su - root 进入到管理员模式&#xff08;-的前后都有空格哈&#xff09; 切换后&#xff0c;显示的就是root... 2.. &#xff0c;输入命令ip addr 2. 切换当前目录 cd /etc/sysconfig/network-scripts/ 3.输入命令&#xff0c;打开文件 vi /etc…

【Unity学习笔记】第十六 World space、Parent space和Self space及Quaternion左乘右乘辨析

目录 World space、Parent space和Self space不同坐标系下的移动不同坐标系下的旋转——Quaternion左乘右乘的区别辨析总结 参考&#xff1a; Unity 世界坐标&局部坐标下的旋转Quaternion multiplication orderlocal space vs global space vs object space in unity3dTran…

二进制搭建 k8s 单 Master 集群架构

一、单机 matser 部署环境 mater节点mater01192.168.80.7kube-apiserver、kube-controller-manager、kube-scheduler、 etcdnode节点node01192.168.80.11kubelet kube-proxy docker &#xff08;容器引擎&#xff09;node02192.168.80.12kubelet kube-proxy docker &#xff0…

DNL、相位噪声以及量化噪底如何影响ADC性能

在一般奈奎斯特ADC的理论性能中常常见到如下公式&#xff08;1-1&#xff09;&#xff0c;我们可以简单聊聊这个公式的来源及其背后的隐形知识。 &#xff08;1&#xff09;采样时钟抖动部分是第一项&#xff0c;是一个满幅输入信号的频率&#xff0c;注意这里要求的是满幅&…

代码随想录打卡day27day28

回溯算法 回溯法解决的问题都可以抽象为树形结构&#xff0c;是的&#xff0c;我指的是所有回溯法的问题都可以抽象为树形结构&#xff01; 因为回溯法解决的都是在集合中递归查找子集&#xff0c;集合的大小就构成了树的宽度&#xff0c;递归的深度就构成了树的深度。 递归…

Day29

回溯算法part03 LC39组合总和(未掌握) 未掌握分析&#xff1a;被数组中的元素可以被重复选取误导&#xff0c;同时没有想到暴力解法来理解回溯 暴力解法肯定是for循环遍历candidates中的每个元素&#xff0c;下一层子循环不像之前的组合题目那样从i1开始&#xff0c;该题目元…

其实解决问题的方法很简单

大家好&#xff01;我是编码小哥&#xff0c;欢迎关注&#xff0c;持续分享更多实用的编程经验和开发技巧&#xff0c;共同进步&#xff01; 本例是一个动态数组的例子&#xff0c;实现数据的增加、删除、根据索引修改数值、获取数值。 dynamic_array.c #include "dy…