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

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

setState更新组件状态

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

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

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

第二个参数:回调函数

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

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

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

相关推荐
狂师几秒前
2026年APP自动化测试工具大全,12款主流工具一次看懂
前端·开源·测试
前端一小卒4 分钟前
搜索 API 额度用完返回空数组,Agent 就开始一本正经地胡说
前端·javascript·node.js
m4Rk_9 分钟前
【论文阅读】Agent 记忆机制(97):MCMA——让 Agent 学会如何抽象记忆,实现跨任务经验迁移
论文阅读·人工智能·学习·开源·github
song50110 分钟前
React Native for OpenHarmony 实战:三方库 react-native-popup-menu 的鸿蒙化适配指南
css·深度学习·react native·react.js·transformer·harmonyos
乘风gg11 分钟前
Spec Kit vs OpenSpec vs Superpowers:三大 AI Coding 框架深度对比
前端·ai编程·claude
晓德11 分钟前
7、LLM 模型是怎么训练生成的?(4)指令微调
人工智能·学习·算法·信息安全
问天_观心17 分钟前
Mistral-7B QLoRA 实战(二):官方权重转换、4-bit NF4 加载与 Base Model 基线测试
人工智能·深度学习·学习·大模型·transformer
andrsted25 分钟前
练题簿在线免费刷题:选择、填空、简答与排序,多种题型练出不同的掌握程度
学习·微信小程序·小程序·学习方法·刷题
w2sfot28 分钟前
AI时代,JS加密还有效吗?
开发语言·前端·javascript
风骏时光牛马32 分钟前
AI服务线上接口异常导致响应中断
前端