从0学习React(4)---更新组件状态setState

devtools/2024/10/8 23:36:08/

在上篇文章中,我们讲了React中的一些基础,包括组件的种类以及state的使用。上篇文章的结尾,我们讲到了如何更新组件的状态(使用setState)。但是我没有讲的很详细,这篇文章我们详细的讲一下React中如何更新组件的状态。

setState更新组件状态

我们一般用 this.setState({要求要改的状态},回调函数) 来修改状态,然后更新页面。可以看到,setState有两个参数,第一个参数是必须要有的,要求要改的状态;第二个参数是可选的,回调函数。

第一个参数:要求要改的状态

第一个参数是一个对象,它包含了你希望更新的组件状态。这个对象中的键值对将会与当前的状态对象进行合并,而不是替换整个状态对象。

第二个参数:回调函数

这个参数是可选的,可以有也可以没有。如果有了这个回调函数,那么会在组件状态更新,然后render渲染完之后,再回来执行这个回调函数。

重点来了,为什么要执行这个回调函数呢?组件的状态更新了,render渲染完了,那不就大功告成了吗?为什么需要执行回调函数呢?这不是多此一举吗?

后来我上网查了一下,大概我总结一下:假如现在有一个计数器按钮,当计数器达到count>10的时候,我想要发送一个网络请求。那比如说,我点击这个按钮十次,组件状态更新,然后渲染,这个过程执行了十次。这个时候,回调函数一次都没有执行,因为不符合条件。当我第11次点击的时候,组件更新count的状态值为11,然后执行render渲染,之后进入回调函数,发现count>10(现在已经是11了),所以执行回调函数,发送网络请求。


http://www.ppmy.cn/devtools/122401.html

相关文章

python配置环境变量

方法一:首先卸载重新安装,在安装时勾选增加环境变量 方法二:我的电脑-属性-高级系统配置 手动添加环境变量,路径为python的安装路径 检查:查看环境变量是否安装成功 安装第三方lib winr,输入cmd pip ins…

Spring Boot 整合 Keycloak

1、概览 本文将带你了解如何设置 Keycloak 服务器,以及如何使用 Spring Security OAuth2.0 将 Spring Boot 应用连接到 Keycloak 服务器。 2、Keycloak 是什么? Keycloak 是针对现代应用和服务的开源身份和访问管理解决方案。 Keycloak 提供了诸如单…

汇编内存寻址

处理字符问题 汇编程序中,用单引号(‘’)的方式指明数据是以字符的形式给出,编译器将把字符转换为相对应的ASCLL码。 大写字母ASCLL值 20H 转换为小写字母 (或运算or) 0010 0000 小写字母ASCLL值 - 20H 转换为大写字母 (与运算and) 1101 1111 示例: 大小写转换 assume c…

【解决】Mac 上 M系列芯片用 Vmware Fusion安装 win11 遇到的主要的问题汇总

此文很短,没闲话,干活满满 Mac 版本最干净版本的 win11 免费下载链接 :链接:https://pan.quark.cn/s/4e8e8bb93564 本文实验电脑为:Macbook Air M3 第一个问题:如何解决安装Windows11时出现“这台电脑无…

Spring源码学习(拓展篇):SpringMVC中的异常处理

目录 前言SimpleMappingExceptionResolver通过接口 HandlerExceptionResolver 实现通过 ExpceptionHander ControllerAdvice 注解实现(推荐) 前言 SpringMVC的异常处理主要有以下三种方式: 使用SpringMVC自带的异常处理类:Simpl…

滚雪球学Oracle[2.4讲]:创建Oracle数据库实例

全文目录: 前言一、使用DBCA进行复杂环境下的实例创建1.1 使用DBCA的步骤案例演示:DBCA创建实例 1.2 优点与适用场景 二、手动创建数据库实例的步骤与脚本2.1 手动创建数据库实例的步骤案例演示:手动创建Oracle数据库实例 2.2 手动创建的优点…

3DGS中Densification梯度累计策略的改进——绝对梯度策略(Gaussian Opacity Fields)

在学习 StreetGS 代码中发现了其中的 Densification 策略与原 3DGS 不太一样,其是使用的 Gaussian Opacity Fields 中的一个的策略 我们先来回忆一下 3DGS 中一个比较重要 contribution:自适应密度控制 1 自适应密度控制 其具体步骤如下: …

CUDA cooperative_groups grid_group测试

CUDA cooperative_groups grid_group测试 一.测试描述及小结1.任务描述2.输出3.小结 二.复现步骤三.grid_group.sync 代码对照1.CUDA C2.PTX3.SASS CUDA Cooperative Groups是CUDA编程模型中引入的一组高级特性,提供了更灵活的线程组织和同步机制 通过Cooperative G…