说说React中setState执行机制?

2023-11-16

setState是异步的
1 .调用setState是不会立即更新的
2 .所有组件使用的是同一套更新机制,当所有组件didmount之后,父组件didmount,然后统一执行更新
3 .更新时会把每个组件的更新合并,每个组件只会触发一次更新后的生命周期

异步函数和原生事件中的setState
1 .用setTimeout模拟异步和回调接口执行情况
2 .在这种情况下,setState会同步更新的

setState更新机制

this.setState({ index: this.state.index + 1 }, () => {
            console.log(this.state.index);
          })
        this.setState({ index: this.state.index + 2 }, () => {
            console.log(this.state.index);
        })
        // 使用对象合并的setState操作,如果是同一个值的话,会合并成一条执行,其实这里只是执行了第二条,但是第一条里面的打印日志也会显示为2


        this.setState((preState) => ({ index: preState.index + 1 }), () => {
            console.log(this.state.index);
          })
        this.setState(preState => ({ index: preState.index + 2 }), () => {
            console.log(this.state.index);
        })
        // 使用函数方式进行更新,是不会被合并的,就算是更新同一个值,同理,第一个也会打印出3

执行state流程
1 .将setState传入的partialState参数存储在当前组件实例的state暂存队列中
2 .判断当前React是否处于批量更新状态,如果是,将当前组件加入待更新的组件队列中去
3 .如果未处于批量更新状态,将批量更新状态标识未true,用事务再次调用前一步的方法,保证当前组件加入了待更新的组件队列中去
4 .调用事务的waper方法,遍历待更新组件队列依次执行更新
5 .执行生命周期componentWillReceiveProps
6 .将组件的state和暂存队列中的state进行合并,得到最新的state对象,并将队列置为空
7 .执行生命周期componentShouldUpdate,根据返回值判断是否要更新。那这里不更新的时候,值还会倒退回去吗?
8 .执行生命周期componentWillUpdate
9 .执行真正的更新 render
10 .执行生命周期comonentDidUpdate
11 .当上一次更新机制执行完毕,以生命周期为例,所有组件,最顶层组件的didmount之后将isBranchUpdate设置为false,执行之前累积的setState
12 .

componentDidMount 调用setState
1 .component中可以使用setState,这将会导致额外触发一次渲染,虽然他将在浏览器刷屏幕前发生。容易导致性能问题
2 .但是有一些情况是不可避免地,比如某些状态必须依赖dom地属性
3 .可以在componentDidMount中调用接口,回调中去进行setState操作
4 .componentWillUpdate,componentDidUpdate中是不能调用setState,会导致死循环的。

总结:
一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用,可以通过点击按钮触发onclick事件,执行this.setState方法更新state状态,然后重新执行render函数,从而导致页面的视图更新

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

说说React中setState执行机制? 的相关文章

随机推荐

  • BottomSheetDialogFragment圆角

    自己使用BottomSheetDialogFragment时 想实现上方圆角 布局设置了圆角的背景后 需要给dialog的北京设置为透明 才能有圆角的效果 网上其他的文章都是这么实现的 dialog getWindow findViewBy
  • 小程序发布上线全流程(包含小程序怎么通过审核)

    小程序在开发完成后 需要上传代码 设为体验版本 功能测试 提交审核 发布上线这几个基本步骤 接下来用自己的亲身经历一一详细介绍 小程序发布上线全流程 1 上传代码 在微信开发者工具的右上角上传处上传全部代码 如下图 如果小程序中涉及到一些r
  • 程序kill后仍占用GPU

    sc yolov5 zqchen gpurtx02 ultralytics gpustat gpurtx02 Thu Aug 24 09 18 31 2023 470 74 0 Quadro RTX 6000 41 C 0 0 24220
  • 2-需求分析

    一 需求收集 1 需求概念 以下常见三种情形 提问题 目的不明确 明确困境 提目的 目的明确 解决方案不明确 提方案 目的明确 方案明确 概念 本质是用户的预期和现状之间的差异产生的需求 在提出需求时 往往会基于目的描述问题 想法或建议 往
  • python代码~考研祝福

    完整代码如下所示 from turtle import speed 2 Turtle screen delay 0 def go to x y up goto x y down def ring a b c d for i in range
  • STM32F103小容量、中容量和大容量单片机介绍

    一 小容量 中容量和大容量表示的型号 STM32F103x4和STM32F103x6被归为小容量产品 闪存小于等于32K STM32F103x8和STM32F103xB被归为中等容量产品 闪存小于等于128K STM32F103xC STM
  • diskgenius创建efi分区_怎么创建efi系统分区?efi系统分区创建教程

    文章导读 近两年出来的的电脑不管是新台式机还是笔记本电脑 绝大多数是uefi主板 要采用对应的硬盘分区是gpt格式的 所以我们一定要记得采用efi引导对应的分区类型一定是gpt分区 EFI分区是GPT磁盘分区表里面的一个必要分区 是独立于系
  • win10上安装python3.9.0+robotframework

    win10上安装python3 9 robotframework python3 9 0下载安装 robotframework安装 wxpython安装 ride安装 python3 9 0下载安装 下载地址 python3 9 0下载地址
  • 【机器实战学习】朴素贝叶斯 python代码实现

    朴素贝叶斯 输入数据创造词汇表 代码实现 coding UTF 8 def loadDataSet 创建了一下实验样本 return 词条且分的文档集合 类别标签的集合 自动检测侮辱性的语言 postingList my dog has f
  • 23种设计模式:适配器模式(最强解析!!!)

    适配器模式是23种设计模式之一 适配器模式作用 适配器模式的作用 在于将一个类的接口变换为客户端所期待的另一种接口 使得原本因为接口不匹配而无法一起工作的两个类能在一起工作 也就是说 适配器模式解决的是接口兼容性问题 适配器模式实现方式 适
  • 深度学习(十四):详解Matconvnet使用imagenet模型训练自己的数据集

    上节讨论过如何使一个简单的cnn网络训练mnist数据集 该节介绍复杂并且使用广泛的使用imagenet网络的预训练模型训练自己的数据集 Ok首先是自己的数据集了 Matconvnet中训练imagenet的数据集的准备不像caffe这些工
  • 【原创】【硬件电路】N沟道、P沟道MOS管基本原理与应用案例

    文章首发于同名微信公众号 DigCore 欢迎关注同名微信公众号 DigCore 及时获取最新技术博文 一 N MOS管和P MOS管的对比 二 N MOS的开关条件 N MOS管的导通调节是G极与S极中间的电压差超过阈值时 D极和S极导通
  • C语言中printf("lld")和printf("I64d")

    C语言中printf lld 和printf I64d 是不同的 这个是因为编译器的不同导致的 所以广大的ACMer需要注意了 HDU OJ 4504就是这样的一个问题 下面是Dp和math方法的AC代码 但是换成lld全都Wrong An
  • 二级空间配置器

    一级空间配置器 https blog csdn net qq 37964547 article details 80474316 一 二级空间配置器 在前面文章中我们介绍了一级空间配置器的概念和实现 一级空间配置器的实现相对比较简单 直接封
  • 操作系统教程第六版——3.3页式存储管理笔记

    一 引入页式存储管理的目的 1 减少碎片 纯分页系统 2 只在内存存放那些反复执行或即将执行的程序段与数据部分 而把那些不经常执行的程序段和数据存放于外存待执行时调入 以提高内存利用率而提出来的 页式虚拟存储 请求分页系统 二 基本思想 1
  • 【报错】RuntimeError: CUDA error: CUBLAS_STATUS_EXECUTION_FAILED when calling `cublasLtMatmul( ltHandle,

    在GPU上运行hugging face transformer的时候出现如下报错 RuntimeError CUDA error CUBLAS STATUS EXECUTION FAILED when calling cublasLtMat
  • 【Android】JUnit和Espresso单元测试新手快速入门

    引入依赖 android defaultConfig testInstrumentationRunner androidx test runner AndroidJUnitRunner dependencies testImplementa
  • JavaScript 中的模块化

    封面图说明 Michael J Kochniss mjk photo de instagram com mjk photo 在早期 JavaScript 程序主要用来实现一些页面上的动画或者简单的交互 所以程序不会太复杂 页面也不会有太多的
  • 【满分】【华为OD机试真题2023 JS】优秀学员统计

    华为OD机试真题 2023年度机试题库全覆盖 刷题指南点这里 优秀学员统计 知识点排序统计编程基础 时间限制 1s 空间限制 256MB 限定语言 不限 题目描述 公司某部门软件教导团正在组织新员工每日打卡学习活动 他们开展这项学习活动已经
  • 说说React中setState执行机制?

    setState是异步的 1 调用setState是不会立即更新的 2 所有组件使用的是同一套更新机制 当所有组件didmount之后 父组件didmount 然后统一执行更新 3 更新时会把每个组件的更新合并 每个组件只会触发一次更新后的