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

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

setState更新组件状态

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

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

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

第二个参数:回调函数

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

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

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

相关推荐
Jiaberrr2 分钟前
微信小程序实战教程:轻松实现列表批量选择功能
前端·javascript·微信小程序·小程序
小白求学12 分钟前
CSS宽度和高度
前端·css
梳子烟YAN14 分钟前
复杂网络(Complex Network)社团数据可视化分析(gephi)实验
python·神经网络·学习·数据可视化
MavenTalk22 分钟前
TypeScript是基于LLM上层研发的受益者
前端·javascript·typescript
霍金的微笑30 分钟前
Gson将对象转换为JSON(学习笔记)
笔记·学习·json
千穹凌帝1 小时前
SpinalHDL之结构(八)
开发语言·前端·mcu·fpga开发·fpga
科技前言1 小时前
程序bug的修复
学习·编程
qbbmnnnnnn1 小时前
【CSS Tricks】css动画详解
前端·css·css动画·css animation
MortalTom1 小时前
HTML·第3章 表格布局与表单交互
前端·css·html
Ada大侦探1 小时前
学习docker第二弹------基本命令[帮助启动类命令、镜像命令、容器命令]
学习·docker·eureka