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

react dom的diff理解及性能优化

diff的三大过程

当某个值变化时,他从根组件寻找
(key,state,props,context)
当父组件稳定时,react会跳过子组件的props的对比
只有当当前组件值改变时,从他开始,所有的子孙节点都会对比props
props是全等比较,所以,都会触发重新渲染(比如把组件A移动到父组件的某个兄弟节点位置,
那么我diff的过程中,如何寻找这个组件呢,就必须跨层级递归寻找
非常耗性能)所以,React假设,没有跨层级的移动组件
(因为实际开发中跨层级的移动组件确实极其的少)
所以diff就可以只比较同级的节点,性能从O n^3 变O n在 React 15 中是递归处理虚拟 DOM 的,
React 16 则是变成了可以中断的循环过程,Scheduler 调度器 —— 收集变化 调度任务的优先级,高优任务优先进入 ReconcilerReconciler 协调器 —— 负责找出变化的组件 diff算法  可中断Renderer 渲染器 —— 负责将变化的组件渲染到页面上Fiber 架构的核心即是"可中断"、"可恢复"、"优先级"
作为静态的数据结构来说,每个 Fiber 节点对应一个 React element,
保存了该组件的类型(函数组件/类组件/原生组件等等)、对应的 DOM 节点等信息。
作为动态的工作单元来说,每个 Fiber 节点保存了本次更新中该组件改变的状态、要执行的工作Fiber 把一个渲染任务分解为多个渲染任务,
而不是一次性完成,把每一个分割得很细的任务视作一个"执行单元"React 16 则是变成了可以中断的循环过程,每次循环都会调用shouldYield判断当前是否有剩余时间。
requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态 去中断
然后	新一轮的调度开始

useMemo

https://juejin.cn/post/7253980320357269561?searchId=20231209154011153FF01F950F1F4D3A93#heading-2

 const childFucntion = useCallback(() => {action()}, [a, b])
作用:用于优化渲染性能。useMemo 会接收一个箭头函数包裹的回调函数和依赖项数组,然后返回回调函数的计算结果。
当依赖项数组中的某个值发生变化时,useMemo 会重新计算回调函数。如果依赖项没有发生变化,useMemo 会返回上一次计算的结果,
这样可以避免不必要的计算。如下,只有在a或者b发生改变的时候,value的值才会重新计算。
useCallback
 const childFucntion = useCallback(() => {action()}, [a, b])当依赖数组中的值发生变化时,useCallback 会返回一个新的函数实例。否则,它将返回上一次创建的函数实例
他俩是如何做性能优化的呢
当你去改变父组件中的state,就会导致父组件重新构建,
而父组件重新构建的时候,会重新构建父组件中的所有函数
(旧函数销毁,新函数创建,等于更新了函数地址),
新的函数地址传入到子组件中被props检测到栈地址更新。
也就引发了子组件的重新渲染。useCallBack并不能阻止函数重新创建
,它只能通过依赖决定返回新的函数还是旧的函数,
从而在依赖不变的情况下保证函数地址不变
useCallBack需要配合React.memo使用
useMemo会执行回调函数并且返回结果,
但是useCallback不会执行回调函数。他俩都需要 结合React.Memo进行使用

useEffect

useEffect(()=>{},[])setTimeout(()=>{dosomesing
},0)

相关文章:

react dom的diff理解及性能优化

diff的三大过程 当某个值变化时,他从根组件寻找 (key,state,props,context) 当父组件稳定时,react会跳过子组件的props的对比 只有当当前组件值改变时,从他开始,所有的子孙节点都会对比props props是全等比较,所以&am…...

【acwing】92. 递归实现指数型枚举

穿越隧道 递归枚举、位运算 方法① 从1到n&#xff0c;顺序访问每位数&#xff0c;是否选择&#xff0c;每位数有两种状态&#xff0c;选1或不选0. AC代码如下&#xff1a; #include <iostream> using namespace std;const int N 100; // bool st[N]; int n;void dfs(in…...

【面试】Java最新面试题资深开发-分布式系统中的CAP理论

问题六&#xff1a;分布式系统中的CAP理论 分布式系统的设计涉及到CAP理论&#xff0c;即一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容忍性&#xff08;Partition Tolerance&#xff09;。请解释一下CAP理论是什么&#x…...

Windows下使用CMD修改本地IP

在网络适配器界面查看当前网线连接的哪个网口&#xff0c;我当前连的是 以太网 这个名字的&#xff1a; 在windows下使用管理员权限打开CMD命令工具&#xff0c;输入如下命令(如我想本地ip改成192.168.2.4)&#xff1a; netsh interface ip set address "以太网" st…...

20231211-DISM++安装win10-22h2-oct

20231211-DISM安装win10-22h2-oct 一、软件环境 zh-cn_windows_10_consumer_editions_version_22h2_updated_oct_2023_x64_dvd_eb811ccc.isowepe x64 v2.3标签&#xff1a;win10 22h2 wepe dism分栏&#xff1a;WINDOWS 二、硬件环境 8G或以上的有PE功能的启动U盘一个台式机…...

前端知识笔记(五)———前端密钥怎么存储,才最安全?

前端密钥存储安全是非常重要的&#xff0c;具体原因如下&#xff1a; 保护敏感数据&#xff1a;密钥用于保护敏感数据的安全性。如果密钥泄露&#xff0c;攻击者可能能够访问和篡改敏感数据&#xff0c;导致数据泄露、数据被篡改或系统被入侵。 防止恶意使用&#xff1a;在前端…...

【智能家居】智能家居项目

智能家居项目目录 项目目录结构 完整而典型的项目目录结构 CMake模板 CMake编译运行 README.md 项目说明文档 智能家居项目目录 【智能家居】面向对象编程OOP和设计模式(工厂模式) 【智能家居】一、工厂模式实现继电器灯控制 【智能家居】二、添加火灾检测模块&#xff08;…...

在AWS Lambda上部署标准FFmpeg工具——Docker方案

大纲 1 确定Lambda运行时环境1.1 Lambda系统、镜像、内核版本1.2 运行时1.2.1 Python1.2.2 Java 2 启动EC23 编写调用FFmpeg的代码4 生成docker镜像4.1 安装和启动Docker服务4.2 编写Dockerfile脚本4.3 生成镜像 5 推送镜像5.1 创建存储库5.2 给EC2赋予角色5.2.1 创建策略5.2.2…...

C#网络应用程序(Web页面浏览器、局域网聊天程序)

目录 一、创建Web页面浏览器 1.示例源码 2.生成效果 二、局域网聊天程序 1.类 2.服务器端 3.客户端 一、创建Web页面浏览器 TextBox 控件用来输入要浏览的网页地址&#xff0c;Button控件用来执行浏览网页操作&#xff0c; WebBrowser控件用来显示要浏览的网页。这个控…...

MacOS 14挂载NTFS 硬盘的最佳方式(免费)

categories: [Tips] tags: MacOS 写在前面 众所周知, MacOS 上面插入 NTFS磁盘格式的话, 磁盘可以向 Mac 写入数据, 但是 Mac 上的数据不能写入磁盘(这是因为 MacOS 的内核扩展禁用了 NTFS 这个格式, 可能是出于安全性或其他原因) 之前一直是使用某 pojie 的 NTFS 工具的, 虽然…...

SpringAOP专栏二《原理篇》

上一篇SpringAOP专栏一《使用教程篇》-CSDN博客介绍了SpringAop如何使用&#xff0c;这一篇文章就会介绍Spring AOP 的底层实现原理&#xff0c;并通过源代码解析来详细阐述其实现过程。 前言 Spring AOP 的实现原理是基于动态代理和字节码操作的。不了解动态代理和字节码操作…...

冒泡排序(函数)

冒泡排序&#xff0c;将一个列表中的两个元素进行比较&#xff0c;并将最小的元素交换到顶部。两个元素中较小的会冒到顶部&#xff0c;而较大的会沉到底部&#xff0c;该过程将被重复执行&#xff0c;直到所有元素都被排序。 输入格式: 输入在第1行中给出N&#xff08;1<N…...

Vue3中的defineModel

目录 一、vue3的defineModel介绍 二、defineModel使用 &#xff08;1&#xff09;在vite.config.js中开启 &#xff08;2&#xff09;子组件 &#xff08;3&#xff09;父组件 一、vue3的defineModel介绍 为什么要使用到defineModel呢&#xff1f;这里有这样一种场景&…...

动态内存管理(C语言)

前言 在学习数据结构时&#xff0c;掌握指针、结构体和动态内存管理是非常关键的&#xff0c;它们就像是搭建程序框架和操作内存的工具箱&#xff0c;需要熟练掌握才能更加游刃有余地进行编程。 指针和结构体我们已经在之前详细的讲过了&#xff0c;今天我将带大家学习动态内存…...

区块链实验室(32) - 下载arm64的Prysm

Prysm是Ethereum的共识层。 1. 下载prysm.sh curl https://raw.githubusercontent.com/prysmaticlabs/prysm/master/prysm.sh --output prysm.sh && chmod x prysm.sh2. 下载x86版prysm共识客户端 ./prysm.sh beacon-chain --download-only3.下载arm64版prysm共识客…...

flutter学习-day3-dart基础

&#x1f4da; 目录 变量声明操作符数据类型控制流错误处理和捕获函数mixin异步 FutureStream 本文学习和引用自《Flutter实战第二版》&#xff1a;作者&#xff1a;杜文 1. 变量声明 var 类似于 JavaScript 中的var&#xff0c;它可以接收任何类型的变量&#xff0c;但最大…...

gitblit自建git仓库

在Ubuntu服务器 安装 java sudo apt-get update sudo apt-get install openjdk-8-jdk # 或者其它你喜欢的版本//sudo snap install gitblit 验证&#xff1a; java -version下载 gitblit https://github.com/gitblit-org/gitblit/releases解压/usr/local tar -zxvf gitb…...

二百一十一、Flume——Flume实时采集Linux中的Hive日志写入到HDFS中(亲测、附截图)

一、目的 为了实现用Flume实时采集Hive的操作日志到HDFS中&#xff0c;于是进行了一场实验 二、前期准备 &#xff08;一&#xff09;安装好Hadoop、Hive、Flume等工具 &#xff08;二&#xff09;查看Hive的日志在Linux系统中的文件路径 [roothurys23 conf]# find / -name…...

python 实现 AIGC 大模型中的概率论:生日问题的基本推导

在上一节中&#xff0c;我们对生日问题进行了严谨的阐述&#xff1a;假设屋子里面每个人的生日相互独立&#xff0c;而且等可能的出现在一年 365 天中的任何一天&#xff0c;试问我们需要多少人才能让某两个人的生日在同一天的概率超过 50%。 处理抽象逻辑问题的一个入手点就是…...

YOLOv8算法改进【NO.87】引入上下文引导网络(CGNet)的Light-weight Context Guided改进C2_f

前 言 YOLO算法改进系列出到这,很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解YOLO算法改进方法的顺序选择。具体有需求的同学可以私信我沟通: 第一,创新主干特征提取网络,将整个Backbone改…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...