react 列表渲染 key解析和 vue的key解析的底层逻辑

前言

在学习react的过程中,了解到key的解析原理,发现和vue的解析原理基本上一致。框架的名称各有不同,在一些底层的模块上有相似。

react key解析原理

react 在修改数据的时候,会创建一个新的虚拟dom,然后用新的虚拟dom和真实的dom进行对比,比较两者的不同之处,并进行标记,然后将标记的部分更新到真实dom。这样就只是部分更新,提高性能。

注意:最理想的key值渲染,是key是唯一的。如使用列表的id;如果不涉及到增删改查,那么使用索引进行创建也是可以的。

vue key解析原理

        底层逻辑基本喝react相似。

条件渲染

{条件?内容一:内容二}

富文本展示

dangerouslySetInnerHTML:主要使用双大括号展示。使用时注意代码的安全性。

<div dangerouslySetInnerHTML={{__html:<div>富文本解析</div>}}></div>

总结

在了解vue的基础上,再学习react,只需要熟练使用react的语法和使用的规则就可以了。

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

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

相关文章

软设之信号量与pv操作

临界资源:诸进程间需要互斥方式对其进行共享的资源。 访问临界资源那段代码称为临界区。 信号量:是一种特殊的变量。可以用来表示资源数量。当信号量为负时还可以表示排队进程数。 P表示要资源&#xff0c;V表示释放资源。 当进行互斥操作时&#xff0c;假定有2台打印机&am…

什么是 Python 中的 __pycache__ 文件夹?

当您开发一个独立的 Python 脚本时,您可能不会注意到目录结构有什么异常。然而,当项目变得越来越复杂时,您通常会决定将部分功能提取到额外的模块或包中。这时,您可能会发现源文件旁边突然出现了一个 __pycache__ 文件夹,而且似乎是随机出现的: project/ │ ├── math…

解决wget报错:ERROR 403: Forbidden.

原因&#xff1a; 服务器正在检查引用者&#xff0c;部分 HTTP 请求会得到错误响应。不以 Mozilla 开头或不包含 Wget 的用户代理的请求会被拒绝。 解决方案&#xff1a; wget --user-agent“Mozilla” 要下载的链接 如&#xff1a; wget --user-agent"Mozilla" …

jvm垃圾回收机制介绍

JVM&#xff08;Java虚拟机&#xff09;是Java程序的运行环境&#xff0c;它负责执行字节码文件。JVM的工作原理主要包括以下几个部分&#xff1a;类加载器、执行引擎、垃圾收集器和内存管理。类加载器负责加载字节码文件并将其转换成Java平台上的机器码&#xff0c;执行引擎负…

java入门-日期类

日期类 Date类 Date类表示特定的时间&#xff0c;可以精确到毫秒。 获取Date对象 Date date new Date(); 构造方法 /*** Allocates a <code>Date</code> object and initializes it so that* it represents the time at which it was allocated, measured to…

(一)Python3接口自动化测试,request https工具类

(一)Python3接口自动化测试,request https工具类 1、前言 需求:本次需要做的Web接口自动化测试,接口请求是HTTPS的,所以需要编写一个https工具类 POST和GET接口类似: 1、新增接口(POST): 请求地址:https://10.1.1.145/xxx/v1/xxx-type-algorithm/add?random=16738625…

Vue(9)

<template><div><!-- appear自动加载动画 --><transition appear><h1 v-show"isShow">你好</h1></transition><!-- name为设置多个过渡动画取别名 --><transition name"app"><h1 v-show"is…

k8s笔记 | Ingress

安装Ingress 添加helm创库 Installation Guide - Ingress-Nginx Controller Ingress | Kubernetes 下载包 将 文件helm 放到 /usr/local/bin/ 并给到执行权限 # 添加可执行权限 chmod ux helm # 测试是否能运行 helm version# 结果 version.BuildInfo{Version:"v3.14…

详细分析Java中的敏感词过滤(附Demo)

目录 前言1. 简易Demo2. 进阶Demo 前言 敏感词直接过滤&#xff0c;有效防止敏感信息的上传 本文主要给一个启发的思路 1. 简易Demo 通过简易的Demo机制了解基本原理 import java.util.HashSet; import java.util.Set;public class test {private Set<String> sensi…

基于STM32的最小系统电路设计(STM32F103C8T6为例)

前言&#xff1a;本篇博客为嵌入式硬件领域的文章&#xff0c;对 STM32 的最小系统电路设计进行教学。本篇博客以嘉立创 EDA&#xff08;标准版&#xff09;进行绘制 STM32F103C8T6 的最小系统电路 PCB 板&#xff0c;STM32 的最小系统通常包括&#xff1a;微控制器、时钟电路、…

python从0开始学习

目录 前言 1、print函数 2、input函数 3、保留字和标识符 总结 前言 本篇文章我们开辟一个新的学习模块&#xff1a;python。python是一个十分简洁实用的编程语言&#xff0c;我们将从0开始学习python 1、print函数 print(*args, sep , end\n, fileNone, flushFalse) pytho…

ESP-01/01S 烧录固件

目录 一、ESP-01 与 ESP-01S 的区别二、ESP-01 与 ESP-01S 烧录 AT 固件1、模块接线a、管脚功能定义b、模组启动模式c、模块接线 2、下载 AT 固件3、下载固件烧录工具4、固件烧录步骤5、模块快速烧录 AT 固件 三、ESP-01 与 ESP-01S 发送 AT 指令1、模块接线2、上电信息3、发送…

硅片和SOI哪个研究方向更好?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;我研一将要结束&#xff0c;即将进入课题组。我们课题组方向有硅片和soi两种方向&#xff0c;这两种方向该如何选择呢&#xff1f; 硅片与…

PHP的类型比较运算符有哪些

在PHP中&#xff0c;类型比较运算符主要用于检查变量的类型或比较两个变量是否属于同一类型。以下是PHP中常用的类型比较运算符&#xff1a; &#xff08;恒等运算符&#xff09;&#xff1a;当且仅当两个变量具有相同的类型和相同的值时&#xff0c;返回true。 $a 5; $b &qu…

【数值优化基础 (自动驾驶)】—— 知识点(方便回顾)

笔记&#xff1a;机器人学中的数值优化基础 数值优化简介 1.优化问题 min f(x) s.t.g(x)<0 h(x)0 假设&#xff1a;&#xff08;1&#xff09;目标函数有下界&#xff08;2&#xff09;下水平集不能无界 2.凸包问题&#xff1a;给定点集&#xff0c;求构成凸包的点 3.常见…

MYSQL三个日志

undo log(回滚日志)&#xff1a;是 Innodb 存储引擎层生成的日志&#xff0c;实现了事务中的原子性&#xff0c;主要用于事务回滚和 MVCC。 redo log(重做日志)&#xff1a;是 Innodb 存储引擎层生成的日志&#xff0c;实现了事务中的持久性&#xff0c;主要用于掉电等故障恢复…

Linux的Shell脚本详解

本文目录 一、什么是 Shell 脚本文件 &#xff1f;二、编写Shell脚本1. 基本规则2. shell 变量&#xff08;1&#xff09;创建变量&#xff08;2&#xff09;引用变量&#xff08;3&#xff09;删除变量&#xff08;4&#xff09;从键盘读取变量&#xff08;5&#xff09;特殊变…

Vulnhub-DIGITALWORLD.LOCAL: VENGEANCE渗透

文章目录 前言1、靶机ip配置2、渗透目标3、渗透概括 开始实战一、信息获取二、smb下载线索三、制作字典四、爆破压缩包密码五、线索分析六、提权&#xff01;&#xff01;&#xff01; Vulnhub靶机&#xff1a;DIGITALWORLD.LOCAL: VENGEANCE ( digitalworld.local: VENGEANCE …

【linux】初步认识文件系统

初步认识文件系统 前置知识的简单了解简单回顾C语言的文件操作stdin&stdout&stderr 系统文件IOopen函数的返回值文件描述符fd打开文件背后的操作文件描述符的分配规则 前置知识的简单了解 文件包括了文件内容和文件属性两个部分(文件内容顾名思义就是文件里面的数据等…

算法===二分查找

文章目录 概要定义代码Python小结 概要 二分&#xff0c;很常用&#xff0c;不管是日常生活&#xff0c;还是工作&#xff0c;学习&#xff1b;哪怕是使用计算机查下哪块占了硬盘空间&#xff0c;都用的上。 二分&#xff0c;太常用了。比如&#xff0c;我的电脑某一个盘慢了&…