当前位置: 首页 > article >正文

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

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

setState更新组件状态

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

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

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

第二个参数:回调函数

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

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

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


http://www.kler.cn/news/325737.html

相关文章:

  • gradle的入门及kotlin的了解
  • 开箱元宇宙| 探索 Great Entertainment Group 如何利用 Web3 和数字创新重新定义活动体验
  • 【Android】多角度看handler--looper的阻塞
  • 产品管理- 互联网产品(6):产品测试
  • CSS预处理器LESS
  • 工厂模式和抽象工厂模式的实验报告
  • Could not find com.mapbox.mapboxsdk:mapbox-android-accounts:0.7.0.解决
  • 禾赛嵌入式面试题及参考答案(2万字长文)
  • 升级 Windows 后如何恢复丢失的文件
  • 51单片机的教室智能照明系统【proteus仿真+程序+报告+原理图+演示视频】
  • centos7.9使用docker容器方式部署jenkins环境
  • 深度学习中的结构化概率模型 - 非结构化建模的挑战篇
  • QT 开发日志:QT 布局管理 —— 如何使用布局器组织 UI 元素
  • bash 脚本获取当前 git 所有本地分支
  • (undone) MIT6.824 Lab1
  • Python库matplotlib之三
  • 论Web性能的重要性
  • 代理的网速与服务器进出口有关吗
  • CentOS7.9 snmp更改161端口
  • 追梦无Bug的软件世界
  • 毕业设计选题:基于springboot+vue+uniapp的在线办公小程序
  • redis 的发布订阅解决分布式下的websocket session 共享问题
  • 代码随想录算法训练营Day15
  • 【面试题】软件测试实习(含答案)
  • 828华为云征文|针对Flexus X实例云服务器的CPU和内存性能测评
  • Quill Editor 富文本编辑器的高度问题
  • SWAP、AquaCrop、FVCOM、Delft3D、SWAT、R+VIC、HSPF、HEC-HMS......
  • 云计算中过等保三级需要的网络安全设备及详细讲解
  • 可视化大屏
  • CTFshow-SSRF