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

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

setState更新组件状态

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

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

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

第二个参数:回调函数

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

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

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

相关推荐
南雨北斗6 小时前
Vue3 v-model中的自动事件绑定
前端
春风解人意6 小时前
从零开始学习嵌入式P28----线程
c语言·学习·算法
MartinYeung57 小时前
[论文学习]MAC:多智能体宪章学习
人工智能·学习·macos
小+不通文墨7 小时前
使用vscode里的U8G2 库编写OLED菜单控制
经验分享·笔记·单片机·嵌入式硬件·学习
雪芽蓝域zzs7 小时前
第八节:Element Plus 基础、封装通用组件 + 路由守卫
前端·vue.js
码视野7 小时前
基于 Spring Boot + Vue3 的【智慧公厕微负压排风除臭与客流人感空间占用导引中台】设计与实现(含PRD/三端高保真源码/大屏)
前端·vue.js·人工智能·spring boot·后端
计算机魔术师7 小时前
刚赔了15亿又来被告?索尼华纳联手把Anthropic告上法庭
前端
笑霸final7 小时前
不用上传服务器!用 Vue3 + ONNX Runtime Web 在浏览器本地实现智能抠图
运维·前端·图像处理·ai·onnx·canva可画·web性能优化
摆烂老大7 小时前
论文学习 | HESS2025 | 中亚寒区季节水文预报
学习·机器学习·水文
西西弗Sisyphus7 小时前
模型训练 不同批次大小与学习率下的训练损失对比(1)
学习·batchsize·learning rate