核心API———createRoot、render方法

1.createRoot 方法是创建react的根容器,就是react元素的插入位置,插入的dom会被转化成react元素,根容器内的内容都会被react管理,原有dom都会被删除。

react17 根容器创建、渲染方式(创建根元素和渲染两种api相结合)

ReactDOM.render(div, document.getElementById('root'))

react18  根容器创建、渲染方式(将创建根容器和渲染分离----避免重新渲染时重复获取根dom节点)

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)

2.重复调用render方法的时候,react会将两次的渲染结果进行比较,只修改发生变化的元素,对dom做最少的修改(使用虚拟dom)

使用diff算法尽量少操作dom来优化性能

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

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

相关文章

ASP .NET Core 8集成Swagger全攻略

Swagger (现在称为 OpenAPI) 是一个用于描述 RESTful API 的规范,ASP.NET Core 内置支持通过 Swashbuckle 库生成 Swagger 文档。以下是在 ASP.NET Core 8 中实现 Swagger 的完整步骤。1、添加Swagger NuGet 包dotnet add package Swashbuckle.AspNetCore2、添加Swa…

【iOS】源码阅读(六)——方法交换

文章目录方法交换什么是Method-Swizzling方法交换核心API**1. 获取方法对象****2. 添加/替换方法实现****3. 交换方法实现****4. 获取方法信息****5. 修改方法实现****使用示例:完整的 Method-Swizzling 流程****注意事项**使用方法交换注意事项线程安全方法交换的影…

mysql运维问题解决:MySQL主从延迟(锁阻塞与读写分离)

小亦平台会持续给大家科普一些运维过程中常见的问题解决案例,运维朋友们可以在常见问题及解决方案专栏查看更多案例 问题概述 告警事件: 2023-07-28 03:31:39.571 首次触发主从延迟告警(延迟1515秒)2023-07-28 07:41:37 告警解除…

SSH 密钥

什么是 SSH 密钥 SSH 密钥就像是你电脑的“身份证”和“钥匙”, 用来安全登录另一台电脑(服务器),而不需要每次输入密码。SSH 密钥是一种安全登录远程服务器的方式,由一对加密的“钥匙”组成:一个公钥 一个…

st-Gcn训练跳绳识别模型一:数据标注工具和标注流程

目录 工具展示和使用说明 工具标注后文件展示说明 json转换成单个npy文件 数据获取补充 工具展示和使用说明 文件名labelV.py集于PySide6实现: 通过选择视频来选择你要标注的视频,然后选择保存路径: 然后视频两个类别。当你看见视频中的人…

springboot跨域问题 和 401

springboot跨域问题 和 401 1.跨域import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotatio…

构建直播平台大体的流程

✅ 直播流程完整链路(基于 SRS OBS 前后端)🧍‍♂️ 用户操作流程:✅ 用户登录系统(前端)系统中校验用户身份(JWT 等)后端可能校验权限,比如“是否有开播资格”✅ 用户…

KOSMOS-2: 将多模态大型语言模型与世界对接

温馨提示: 本篇文章已同步至"AI专题精讲" KOSMOS-2: 将多模态大型语言模型与世界对接 摘要 我们介绍了 KOSMOS-2,一种多模态大型语言模型(MLLM),赋予了模型感知物体描述(例如,边界框…

协作机器人操作与编程-PE系统示教编程和脚本讲解(直播回放)

协作机器人操作与编程-PE系统示教编程和脚本讲解本次讲解主要围绕协作机器人PE系统的操作与编程展开,内容涵盖软件安装、虚拟机配置、手动操作、在线编程、变量设置、网络通信及标定方法等方面。以下是主要内容要点提炼: 软件安装与虚拟机配置 需从官网下…

【前后端】Node.js 模块大全

用到的全部总结在这里,不定期更新 链接 node一本通 包括: express path fs/ process/ os/ http/ mysql/mongoose/ express-jwt/jsonwebtoken/ dotenv/ multer/ swagger/ cors/ nodemon (docker篇有)常用模块 内置 fs 文件系统操作(读写、重命…

双8无碳小车“cad【17张】三维图+设计说名书

基于MATLAB的双八无碳小车轨迹仿真及其结构设计 摘 要 本文设计的基于MATLAB的无碳小车来自于全国大学生工程训练能力竞赛,依据绿色环保,设计一种通过重力势能转换成动能来驱动小车行走的装置。通过分析任务要求,本文完成了小车的三维结构设计…

视觉大模型离线部署全流程优化:从微调技术到工程实践

视觉大模型离线部署全流程优化:从微调技术到工程实践 一、视觉大模型离线部署概述 1.1 视觉大模型的应用场景与挑战 视觉大模型在物体检测、图像生成、图像描述等领域展现出强大能力,已成为人工智能领域的研究热点和产业应用焦点(5)。随着技术的发…

Vue中组件的生命周期

组件的生命周期生命周期、生命周期函数、生命周期钩子vue2的生命周期创建(创建前的生命周期函数 beforeCreate ,创建完毕created)挂载(挂载前beforeMount,挂载完毕mounted)//把组件放在页面中更新&#xff…

securecrt连接服务器报错 Key exchange failed 怎么办

新买了一台阿里云机,用securecrt去连接,如下报错这个错误表明你的 SSH 客户端与服务器之间无法就密钥交换方法和主机密钥算法达成一致,导致连接失败。这通常是由于客户端和服务器支持的加密算法集不匹配造成的。 解决方式 编辑服务器的/etc/s…

用协议分层模型实战:从物理层到应用层的STM32协议栈开发

目录 1. 揭开协议栈的神秘面纱:从STM32到分层思维 STM32的硬件优势 本章实战:点亮物理层的第一步 2. 数据链路层:让STM32学会“打包”和“拆包” 以太网帧的那些事儿 实战:解析以太网帧 3. 网络层:让STM32学会“找路” LwIP的快速上手 实战:实现一个简单的Ping …

微服务基础环境搭建-centos7

文章目录1、安装docker1.1、安装步骤1.2、docker常用命令2、安装Nginx3、Docker安装Mysql4、Docker安装Redis5、安装Nacos5.1、Nacos的作用5.2、单体服务安装6、安装RocketMQ服务6.1 MQ的作用6.2 RocketMQ的基础服务架构6.2、安装RocketMQ服务6.3、安装dashboard面板服务6.4、R…

Netty知识点

一、Netty的零拷贝机制 零拷贝的基本理念:避免在用户态和内核态之间拷贝数据,从而降低 CPU 占用和内存带宽的消耗除了系统层面的零拷贝。 1、FileRegion 接口 FileRegion 是 Netty 提供的用于文件传输的接口,它通过调用操作系统的 sendfile 函…

Kafka的基本使用

目录 认识Kafka 消息队列 消息队列的核心概念 核心价值与解决的问题 Kafka ZooKeeper Kafka的基本使用 环境安装 启动zookeeper 启动Kafka 消息主题 创建主题 查询主题 修改主题 发送数据 命令行操作 JavaAPI操作 消费数据 命令行操作 JavaAPI操作 认识Kafka…

Flink2.0学习笔记:Table API SQL

stevensu1/EC0720 表 API 和 SQL# 表 API 和 SQL——用于统一流和批处理 加工。表 API 是适用于 Java、Scala 和 Python 的语言集成查询 API,它 允许组合来自关系运算符的查询,例如 selection、filter 和 join in 一种非常直观的方式。Flink 的 SQL 支…

【 SpringAI核心特性 | Prompt工程 】

1. Prompt 工程 基本概念:Prompt ؜工程又叫提示‏词工程,简单来说,就是输入‌给 AI 的指令。 比如下面‏这段内容,就是提示词: 请问桂林电子科技大学是一个怎么样的学校?1.1 Prompt分类 在 AI ؜对话中…