组件更新的底层逻辑

news2024/12/30 3:27:45

第一种更新:组件更新的逻辑,当修改了相关状态,组件会更新

1.触发shouldComponentUpdate 周期函数:是否允许更新

shouldComponentUpdate(nextProps, nextState) {
// nextState: 存储要修改的最新状态
// this. state:存储的还是修改前的状态「此时状态还没有改变」
console. log(this.state, nextState); .
//此周期函数需要返回t rue/false
//返回true: 允许更新,会继续执行下一-个操作
//返回false: 不允许更新,接下来啥都不处理
return true;
}

2.触发时机componentWillUpdate周期函数:更新之前
此周期函数也是不安全的,在这个阶段,状态还没有被修改

3.修改状态值/属性值「让this. state. xxx改为最新的值」

4.触发render周期函数:组件更新

按照最新的状态/属性,把返回的JSX编译为virtua LDOM,和上一次渲染出来的virtua LDOM进行对比「DOM-DIFF」,把差异的部分进行渲染「渲染为真实的DOM」

5.触发componentD idUpdate周期函数:组件更新完毕

特殊说明:如果我们是基于this . forceUpdate()强制更新视图,会跳过shou ldComponentUpdate周期函数的校验,直接从WillUpdate开始进行更新,也就是:视图一定会触发更新!!!哪怕我们数据没有改变也会直接更新!!!!


第二种更新:父组件调用子组件

父子组件嵌套,处理机制上遵循深度优先原则:父组件在操作中,遇到子组件,一定是把子组件处理完,父组件才能继续处理

父组件第一次渲染
父willMount >父render->子willMount >子render >子didMounty >父didMount

父组件更新:
父shouldUpdate ->父willUpdate ->父render->子willReceiveProps ->子shouldUpdate ->子shoudComponentUpdate(如果为true才继续后面的步骤)->子willUpdate ->子render ->子didUpdate->父didUpdate

在这里插入图片描述


类组件和函数组件对比

函数组件是“静态组件”:
组件第一次渲染完毕后,无法基于"内部的某些操作”让组件更新,无法实现“自更新”;但是,如果调用它的父组件更新了,那么相关的子组件也
定会更新,可能传递最新的属性值进来;
1.函数组件具备:属性…「其他状态等内容几乎没有」
2.优势:比类组件处理的机制简单,这样导致函数组件渲染速度更快! !

类组件是“动态组件”:
组件在第一渲染完毕后,除了父组件更新可以触发其更新外,我们还可以通过: this. setState修改状态 或者this.forceUpdate 等方式,让组件实现"自更新”! !
1.类组件具备:属性、状态、周期函数、ref… r几乎组件应该有的东西它都具备」
2.优势:功能强大! !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/630446.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分布式系统常见的数据分区算法

文章目录 顺序分区轮询分区算法时间片轮转分区算法数据块分区算法业务主题分区算法 哈希分区节点取模分区算法一致性哈希分区算法(重点)1.Hash环2.容错性和可扩展性3.数据倾斜4.带有限负载的一致性哈希算法5.带虚拟节点的一致性哈希算法 虚拟槽分区算法&…

个人开发者或学生必备的100元云服务器大全

100元以内云服务器配置大全,预算100元可以买到什么配置的云服务器?100元可以选到腾讯云2核2G3M带宽轻量服务器、阿里云2核2G3M带宽轻量应用服务器、UCloud香港轻量应用云主机30M带宽、华为云HECS云服务器2核4G配置等,阿腾云分享预算100元可选…

华为OD机试真题 JavaScript 实现【数列描述】【2023 B卷 100分】,附详细解题思路

一、题目描述 有一个数列a[N] (N60),从a[0]开始,每一项都是一个数字。数列中a[n1]都是a[n]的描述。其中a[0]1。 规则如下: a[0]:1 a[1]:11(含义:其前一项a[0]1是1个1,即“11”。表示a[0]从左到右,连续出…

GitOps的12个痛点

如今很多团队采用GitOps作为标准部署流程,这篇文章总结了GitOps的12个痛点,从而帮助我们在采用这一实践的过程中更好的理解GitOps的优势和缺陷,选择适合自己的解决方案。原文:The pains of GitOps 1.0[1] GitOps作为软件发布实践有…

Git与Gitee远程仓库的系列操作

⭐作者介绍:大二本科网络工程专业在读,持续学习Java,努力输出优质文章 ⭐作者主页:逐梦苍穹 ⭐所属专栏:Git ⭐如果觉得文章写的不错,欢迎点个关注一键三连😉有写的不好的地方也欢迎指正&#x…

Prometheus插件安装(mysql_exporter)

简介 mysql_exporter是用来收集MysQL或者Mariadb数据库相关指标的,mysql_exporter需要连接到数据库并有相关权限。既可以用二进制安装部署,也可以通过容器形式部署,但为了数据收集的准确性,推荐二进制安装。 一,下载安…

ASO优化之如何维护品牌词

App Store的关键词优化一般可以分为品牌词,竞品词和行业词,长度要控制在100字符以内。所以我们可以通过投放竞品词,将竞争对手的部分的流量占为己有,维护品牌词的有效方式有:1,率先拿下自己家的品牌词。 2…

『 前端三剑客 』:CSS选择器

文章目录 一 . 基本语法二 . CSS 引入方式2.1 内部样式表2.2 内联样式表2.3 外部样式表 三 . CSS选择器3.1 基础选择器1 . 标签选择器2 . 类选择器3 . id 选择器4 . 通配符选择器 3.2 复合选择器5 . 后代选择器6 . 子代选择器7 . 并集选择器8 . 伪类选择器 上一篇文章我们介绍了…

ProGuard 进阶系列(一): 运行源代码

在前面的文章深入 Android 混淆实践:ProGuard 通关秘籍和深入 Android 混淆实践:多模块打包爬坑之旅中,已经讲到了如何在 Android 中使用 ProGuard,以及如何自定义实现混淆规则的生成。为了更深入地理解 ProGuard 的细节&#xff…

Python3数据分析与挖掘建模(11)复合分析-分组分析与实现示例

1. 分组分析 1.1 概述 分组与钻取是数据分析中常用的技术,用于对数据进行聚合和细分分析。它可以帮助我们从整体数据中获取特定维度的汇总信息,并进一步钻取到更详细的子集数据中进行深入分析。 分组(Grouping)是指根据某个或多…

chatgpt赋能python:Python怎么写绝对值

Python怎么写绝对值 在Python编程语言中,有很多常用函数。其中包括求绝对值的函数。在这篇文章中,我们将介绍如何在Python中使用绝对值函数,并提供一些示例。 什么是绝对值函数? 绝对值函数是一个数学中常用的函数,…

WPF开发txt阅读器4:字体控件绑定

文章目录 控件折叠字体尺寸绑定选择字体字体的中文名称 txt阅读器系列: 需求分析和文件读写目录提取类💎列表控件与目录 控件折叠 作为一个txt阅读器,至少能够设置文字字体、尺寸,段落行间距等,还得有护眼模式等一系…

2023 年最新版Java面试题及答案整理(完整版,超详细)

程序员一步入中年,不知不觉便会被铺天盖地的“危机感”上身,曾经的那个少年已经不在,时间就是这样公平。就算你能发明Java语言,随着时间的推移,你注定还是要成为慢慢变蔫的茄子,缓缓变黑的葡萄。 看着金九…

支付宝商家多个账号下的账单管理工具配置指南

大家好,我是小悟 阅读这篇文章之前,结合这篇【有了这个工具,支付宝商家多个账号下的账单管理更方便了】干货食用更佳。 商户管理 这里录入的是商家应用相关信息 商户名称:应用id所属的应用名称。 应用id:支付宝开放…

Django新手必看:如何创建应用和定义数据表。(详细讲解)

Django新手必看:如何创建应用和定义数据表。 1. Django创建应用1.1 创建应用1.2 应用的添加 2. Django ORM2.1 定义数据表2.2 定义项目数据表2.3 通用字段选项2.4 外键使用2.5 应用数据库迁移 🏘️🏘️个人简介:以山河作礼。 &…

json-server操作restful

1.安装Node.js 默认已经内置npm&#xff0c;下载对应软件包直接安装即可。nodejs的官网 命令 描述 指令解释npm -v查看版本npm install <模块名>安装模块npm list查看所有全局安装的模块npm list -g查看某个模块的版本号npm install --save <模块名>在package.js…

【大模型】开源大模型汇总以及微调策略

目录 前言LLaMAstanford AlpacaGuanacoVicunaChinese-LLaMA-AlpacaChinese-VicunaLuotuo-Chinese FalconOpenBuddy-Falcon ChatGLM && VisualGLMMOSSAquilaPandaGPTTigerBot模型微调策略LoRAQLORAP-tuningv2 前言 自从ChatGPT出世以来&#xff0c;各个大厂/研究院都纷…

Hugging News #0609: 最新代码生成模型 StarCoder+ 和 StarChat Beta 重磅发布!

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」&#xff0c;本期 Hugging News 有哪些有趣的消息…

SG90舵机介绍

SG90舵机简介 SG90舵机是一种位置&#xff08;角度&#xff09;伺服的驱动器&#xff0c;适用于那些需要角度不断变化并可以保持的控制系统。在机器人机电控制系统中&#xff0c;舵机控制效果是性能的重要影响因素。舵机可以在微机电系统和航模中作为基本的输出执行机构&#x…

耗时一个月,整理了这份大厂Java面试 / 学习指南,共计1500+ 题全面解析

程序员一步入中年&#xff0c;不知不觉便会被铺天盖地的“危机感”上身&#xff0c;曾经的那个少年已经不在&#xff0c;时间就是这样公平。就算你能发明 Java 语言&#xff0c;随着时间的推移&#xff0c;你注定还是要成为慢慢变蔫的茄子&#xff0c;缓缓变黑的葡萄。 看着金…