React组件渲染和更新的过程

一、回顾Vue组件渲染和更新的过程

在这里插入图片描述

二、回顾JSX本质和vdom

在这里插入图片描述

三、组件渲染和更新

1、组件渲染过程

  • props state (组件有了props state)
  • render()生成vnode
  • patch(elem, vnode)

2、组件更新过程

  • setState(newState) --> dirtyComponents (可能有子组件)
  • render()生成newVnode
  • patch(vnode, newVnode)

React的patch可以被拆分为2个阶段
1、reconciliation阶段-------执行diff算法, 纯JS计算
2、commit阶段--------将diff结果渲染DOM

四、fiber优化性能

可能会有性能问题
js是单线程,且和DOM渲染公用一个线程
当组件足够复杂,组件更新时计算和渲染都压力大
同时再有DOM操作需求(动画、鼠标拖拽等),将卡顿

fiber:
将reconciliation阶段进行任务拆分(commit无法拆分,dom渲染无法拆分)
DOM需要渲染时暂停,空闲时恢复
window.requestIdlecallback

(是React内部机制,开发者体会不到)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

温湿度监测技术又进化了,这个操作太牛了!

无论是在家庭、医疗、农业、制造业,还是在物流和食品行业,精确的温湿度监控对于确保安全、质量和效率都至关重要。 客户案例 医疗行业 在医疗行业,温湿度监控对于存储药品、生物样本和医疗设备至关重要。山东某医院引入了泛地缘科技推出的温湿…

LeetCode【17】电话号码的字母组合

题目: 思路: 参考:https://blog.csdn.net/weixin_46429290/article/details/121888154 和上一个题《子集》的思路一样,先画出树结构,看树的深度(遍历层级),树的宽度(横向…

智慧门牌管理系统:省市区县区划数据与国家级开发区共融

文章目录 前言一、行政区划数据的重要性二、支持国家级开发区的发展三、数据基础的重要性 前言 随着科技的飞速发展,我们的生活正在发生日新月异的变化。其中,智慧城市的概念正逐渐成为我们生活中的一部分。智慧城市,顾名思义,运…

性能测试-JMeter分布式测试及其详细步骤

性能测试概要 性能测试是软件测试中的一种,它可以衡量系统的稳定性、扩展性、可靠性、速度和资源使用。它可以发现性能瓶颈,确保能满足业务需求。很多系统都需要做性能测试,如Web应用、数据库和操作系统等。 性能测试种类非常多&#xff0c…

wps/word 之 word中的两个表格 如何合并成为一个表格(已解决)

第一步:新建两个表格: 如何实现上面的两个表格合并呢? 分别选定每个表格,然后鼠标右键---》表格属性 在表格属性中的 表格---》选择 无文字环绕。 第二个表格按照同样的方法 设置 无文字环绕。 然后将中的文本行删去即可以了。选…

去中心遇见混币器

区块链的去中心化交易所在保护隐私和安全性上有着无可比拟的优势,用户甚至不需要提供注册资料,只要有web3钱包即可跟智能合约交易。在uniswap上可兑换绝大多数加密币,新推出的衍生品交易所ununx已经可以交易美股,期货和外汇,一个全…

运行 XXXApplication 时出错,命令行过长

运行 XXXApplication 时出错,命令行过长 问题原因:当在运行 XXXApplication 时遇到命令行过长的错误,通常是由于操作系统的限制导致的。在某些操作系统中,命令行的长度是有限制的,超过该限制会导致出错。 问题解决&am…

vue2打包优化-小白也可快速上手的一套

需求:项目过大可以使用打包优化,减少项目体积,加速页面加载,增强用户体验,跟着步骤来即可实现,主要是vue2的打包优化,不是vue3,文章可能有点长,但是很实用哈哈&#xff0…

Java实现业务异步的几种方案

背景: 在java中异步线程很重要,比如在业务流处理时,需要通知硬件设备,发短信通知用户,或者需要上传一些图片资源到其他服务器这种耗时的操作,在主线程里处理会阻塞整理流程,而且我们也不需要等…

修改ruoyi框架前端刷新页面时紫色的背景颜色

问题描述 最近在使用ruoyi的前后端分离框架,发现前端VUE页面刷新的时候,会出现加载的紫色页面,想要修改这个颜色,请看下面的教程。 修改教程 找到public/index.html,然后找到background为#7171C6这个颜色的代码&…

DDoS攻击与CC攻击:网络安全的两大挑战

在今天的数字时代,网络安全问题越来越突出,其中分布式拒绝服务攻击(DDoS攻击)和HTTP洪泛攻击(CC攻击)是两种常见的网络威胁。本文将探讨这两种攻击的概念、原理以及如何有效地应对它们。 1. DDoS攻击&…

​ModbusTCP转Profibus-DP从站网关把modbus的数据传到300plc上的应用方法​​

远创智控YC-DPS-TCP,让Profibus和ModbusTcp总线之间的通讯协议转换更简单。 远创智控YC-DPS-TCP 是一种将Profibus和ModbusTcp总线连接的通讯协议转换设备。这个设备非常符合ModbusTcp协议的设备,比如各种仪表、传感器、交换机等,它们可以通过…