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

embedded/2024/10/19 19:40:51/

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

setState更新组件状态

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

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

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

第二个参数:回调函数

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

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

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


http://www.ppmy.cn/embedded/120031.html

相关文章

Qt Linguist手册-翻译员

翻译人员 Qt Linguist 是为 Qt 应用程序添加翻译的工具。一旦安装了 Qt,就可以像开发主机上的其他应用程序一样启动 Qt Linguist。 Qt Linguist 主窗口包含一个菜单栏和以下视图: 上下文 (F6) 用于从上下文列表中选择要翻译的字符串。字符串 (F7) 用于…

选择租用徐州服务器机柜的作用有哪些?

企业为了线上网络业务,通常都会选择租用服务器来确保网络的稳定性,企业选择服务器租用和托管业务后,同时也需要租用服务器机柜来进行放置所使用的服务器,对于机柜企业可以选择租用徐州机柜,下面就来聊一下选择租用徐州…

IvorySQL 3.4 来了

9 月 26 日,IvorySQL 3.4 发版。本文将带大家快速了解新版本特性。 IvorySQL 3.4 发版说明 IvorySQL 3.4 基于 PostgreSQL 16.4,修复了多个问题,并增强多项功能。 PostgreSQL 16.4 的变更 在未经授权时防止 pg_dump 执行,并引入一…

本篇4K,立志最细,FreeRtos中Queue使用教程与个人理解!!!

前言:编写不易,请勿搬运,仅供学习参考!!! 目录 FreeRtos中Queue的使用 Queue创建 Queue实际调用 动态创建和静态区别 Queue接受数据 Queue实际调用 Queue发送数据 Queue实际调用 Queue队列集使用…

爬虫库是什么?是ip吗

爬虫库通常指的是用于网页爬虫(Web Scraping)开发的代码库或框架,它不是IP地址。以下是关于爬虫库的详细解释: 爬虫库的定义 爬虫库是一些用于简化网络数据抓取过程的工具和框架,通常提供了一系列函数和类&#xff0…

鸿蒙开发(NEXT/API 12)【请求用户授权】手机侧应用开发

为保护用户隐私,Wear Engine的API需要用户授权才可以正常访问。建议开发者在用户首次调用Wear Engine开放能力的时候执行本章节操作。 申请用户穿戴设备权限 应用拉起华为账号登录和授权界面,由用户授权相应的数据访问权限。用户可以自主选择授权的数据…

Python通过Sqlalchemy框架实现增删改查

目录 简介 什么是SQLAlchemy? SQLAlchemy可以分为两个部分:Core和ORM。 一、首先安装sqlalchemy 二、在配置文件中添加数据库连接信息,我这里是Mysql 三、 创建数据库连接类,我这里是动态读取数据库的表字段,自动…

如何修复变砖的手机并恢复丢失的数据

您可能之前听说过“变砖”,但您知道什么是变砖手机吗?正如许多论坛中经常提出的问题一样,我如何知道我的手机是否变砖了?好吧,手机变砖主要有两种类型,即软件变砖和硬变砖。软变砖手机意味着重启后您仍然可…