React中setState的原理及深层理解

news/2025/2/19 9:32:53/

1.为什么使用setState

React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化

我们必须通过setState来告知React数据已经发生了变化

setState方法是从Component中继承过来的。

2.setState异步更新

  • setState设计为异步,可以显著的提升性能
    • 如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的
    • 最好的办法应该是获取到多个更新,之后进行批量更新
  • 如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步
如何可以获取到更新后的值
方式一

setState的回调

setState接受两个参数:第二个参数是一个回调函数,这个回调函数会在更新后会执行

setState(partialState, callback)

方式二

生命周期内获取

3.setState异步与同步的理解

在React18版本之前

分成两种情况

  • 在组件生命周期或React合成事件中,setState是异步;
  • 在setTimeout或者原生dom事件中,setState是同步;

在React18版本之后

默认所有的操作都被放到了批处理中,异步处理


http://www.ppmy.cn/news/1124606.html

相关文章

Java中的全局变量和局部变量

在Java中,全局变量和局部变量是两种不同作用域的变量。 全局变量(成员变量): 在类中定义的变量称为成员变量,也叫全局变量。它们的作用域是整个类,在类的任何地方都可以被访问。如果没有显式地初始化&#…

抖音SEO矩阵系统源码开发搭建

1. 确定需求和功能:明确系统的主要目标和需要实现的功能,包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构:根据需求和功能确定系统的架构,包括前端、后端、数据库等部分的设计&#xff0…

概率论的相关知识

理解随机变量 X X X和 x x x的区别, F X ( x ) F_X(x) FX​(x)、 f X ( x ) f_X(x) fX​(x) X X X代表的是随机变量, x x x是样本值,是 X X X的具体取值,分布函数 F X ( x ) F_X(x) FX​(x)和概率密度 f X ( x ) f_X(x) fX​(x)中…

【遥遥领先】Eolink IDEA 插件:零代码入侵,自动生成接口

省流版: Eolink 有 IDEA 插件吗? 有,而且遥遥领先!我们在一年半之前就发布了,而且功能更丰富! IDEA 插件市场搜索“Eolink Apikit”即可安装使用。 🚀使用指引:Eolink - IntelliJ ID…

云安全之访问控制介绍

访问控制技术背景 信息系统自身的复杂性、网络的广泛可接入性等因素,系统面临日益增多的安全威胁,安全问题日益突出,其中一个重要的问题是如何有效地保护系统的资源不被窃取和破坏。 访问控制技术内容包括访问控制策略、访问控制模型、访问…

不甘于被强势厂商捆绑,中国移动未来或自研5G基站

一直以来运营商被认为只是做服务,而设备等都是由设备商提供的,甚至由于如今的设备高度复杂,设备商已承包越来越多的基站运维工作,运营商的技术水平越来越低,不过随着中国移动发布5G射频芯片8676,似乎显示出…

电脑如何连蓝牙耳机

网址: 电脑连蓝牙耳机怎么连 电脑添加蓝牙耳机方法【详解】-太平洋IT百科 (pconline.com.cn) 注意事项: 手机蓝牙,必须断开, 否则:电脑无法扫描到

JVS规则引擎,打造智能自动化决策的利器

在日常的项目中,实时数据处理和自动化决策是智能化业务、灵活化配置的关键能力。为了满足这一需求,JVS规则引擎应运而生,它是一种高效的低代码/零代码平台,能够帮助企业快速构建各种应用场景,实现自动化、智能化决策的…