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.mfbz.cn/a/585076.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[华为OD] C卷 服务器cpu交换 现有两组服务器QA和B,每组有多个算力不同的CPU 100

题目&#xff1a; 现有两组服务器QA和B,每组有多个算力不同的CPU,其中A[i]是A组第i个CPU的运算能 力&#xff0c;B[i]是B组第i个CPU的运算能力。一组服务器的总算力是各CPU的算力之和。 为了让两组服务器的算力相等&#xff0c;允许从每组各选出一个CPU进行一次交换。 求两…

计算机网络----第十三天

DNS协议和文件传输协议 DNS&#xff1a; 含义&#xff1a;用于域名和IP地址的互相解析 DNS域名&#xff1a; 背景&#xff1a;通过IP地址访问目标主机&#xff0c;不便于记忆 域名的树形层次化结构&#xff1a; ①根域 ②顶级域&#xff1a;主机所处的国家/区域&#xf…

个人学习资源整理

文章目录 视频相关stl源码讲解相关 网站相关CPP网站 视频相关 stl源码讲解相关 跳转 网站相关 CPP网站 https://cplusplus.com/ https://gcc.gnu.org/

PostgreSQL的扩展(extensions)-常用的扩展之pg_repack

PostgreSQL的扩展&#xff08;extensions&#xff09;-常用的扩展之pg_repack pg_repack 是一款非常有用的 PostgreSQL 扩展工具&#xff0c;它能够重新打包&#xff08;repack&#xff09;表和索引以回收空间并减少碎片&#xff0c;而且在这个过程中不会锁定表&#xff0c;允…

软件测试常问的超高频面试题目,2022最强版,附答案

1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师奔去。而且我也有初步的职业规划&#xff0c;前3年积累测试经验&#xff0c;按如何做好测试工程师的要点去要求自己&…

基于Vue3的Axios异步请求

基于Vue3的Axios异步请求 1. Axios安装与应用2. Axios网络请求封装3. axios网络请求跨域前端解决方案server.proxy 1. Axios安装与应用 Axios是一个基于promise的网络请求库&#xff0c;Axios.js.中文文档&#xff1a;https://axios.js.cn/ 安装&#xff1a;npm install --sa…

Apollo Dreamview+之Studio插件安装

步骤一&#xff1a;登录 Apollo Studio 工作台 登录 Apollo Studio 工作台。 步骤二&#xff1a;获取插件安装链接 在账户信息中&#xff0c;单击 我的服务 。 2. 选择 仿真 页签。 3. 在 插件安装 中单击 生成 &#xff0c;选择 Apollo 最新版本&#xff0c;并单击 确定 。…

计算机视觉大项目(1)-水果分级系统

项目来源&#xff1a;河北大学计算机视觉课程-杨老师. 一共有四个标题&#xff0c;本篇博客只完成前两问。 目录 实验目的: 实验内容&#xff1a; 实验步骤&#xff1a; 1.水果图像的分割 >掩膜图像Mask 是什么&#xff1f; >改进:去除反光部分的影响 2&#xf…

ES6之rest参数、扩展运算符

文章目录 前言一、rest参数二、扩展运算符 1.将数组转化为逗号分隔的参数序列2.应用总结 前言 rest参数与arguments变量相似。ES6引入rest参数代替arguments&#xff0c;获取函数实参。扩展运算符能将数组转化为参数序列。 一、rest参数 function namelist1() {console.log(ar…

【无标题】场外个股期权多少钱才能做?个人能做吗?

场外个股期权的交易门槛相对较高&#xff0c;主要面向符合特定条件的机构投资者。一般来说&#xff0c;法人或合伙企业等组织参与的&#xff0c;需要满足最近1年末净资产不低于5000万元人民币、金融资产不低于2000万元人民币的条件&#xff0c;并具备3年以上证券、基金、期货、…

【postgresql】实时查询表字段相关数据

需求&#xff1a;数据库设计时候时不时变动&#xff0c;想根据实际编号进行查询表字段相关信息 库表 脚本 原始 优化后 查询 文档

[C++][算法基础]最大不相交区间数量(贪心 + 区间问题2)

给定 &#x1d441; 个闭区间 [&#x1d44e;&#x1d456;,&#x1d44f;&#x1d456;]&#xff0c;请你在数轴上选择若干区间&#xff0c;使得选中的区间之间互不相交&#xff08;包括端点&#xff09;。 输出可选取区间的最大数量。 输入格式 第一行包含整数 &#x1d4…

Servlet(三个核心API介绍以及错误排查)【二】

文章目录 一、三个核心API1.1 HttpServlet【1】地位【2】方法 1.2 HttpServletRequest【1】地位【2】方法【3】关于构造请求 1.3 HttpServletResponse【1】地位【2】方法 四、涉及状态码的错误排查&#xff08;404……&#xff09;五、关于自定义数据 ---- body或query String …

【AI写作】未来科技趋势:揭秘DreamFusion的革新力量

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

分享一个网站实现永久免费HTTPS访问的方法

免费SSL证书作为一种基础的网络安全工具&#xff0c;以其零成本的优势吸引了不少网站管理员的青睐。要实现免费HTTPS访问&#xff0c;您可以按照以下步骤操作&#xff1a; 一、 选择免费SSL证书提供商 选择一个提供免费SSL证书的服务商。如JoySSL&#xff0c;他们是国内为数不…

Ubuntu C++ man手册安装及使用

Ubuntu下C++ man手册安装 C++在线文档: http://www.cplusplus.com/reference/ 第一种办法:使用cppman $ sudo apt install cppman 使用方法 第二种办法: 打开网页:GCC mirror sites- GNU Project 点击下图中的突显行链接: Russia, Novosibirsk:

可平滑替代FTP的FTP替代解决方案,具有哪些强大功能?

FTP是一种广泛使用的文件传输协议&#xff0c;主要用于在网络上的计算机之间传输文件。具有以下特点&#xff1a; 1.简单易用&#xff1a;FTP协议相对简单&#xff0c;易于设置和使用&#xff0c;许多操作系统和应用程序都内置了对FTP的支持。 2.广泛的客户端支持&#xff1a…

售价不当人暴涨后,盘点当前更值得入手的SSD

PC 硬件市场本无测&#xff0c;去年 SSD 白菜价到如今彻底反转这一案例&#xff0c;可以说再次给我们狠狠上了一课。 当初被降价冲昏头脑&#xff0c;坚信 SSD 售价还会继续下探做起等等党的同学&#xff0c;看到今年这价格近乎翻倍行情估计得懵逼了吧。 不过既然有等等党&…

基于OpenCv的图像二值图和灰度直方图

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

Python新手入门基础英文笔记

1、字符串的操作 user&#xff1a;用户 name&#xff1a;名称/姓名 attibute&#xff1a;字段/属性 Value&#xff1a;值 2、重复/转换/替换/原始字符号 upper&#xff1a;上面 lower&#xff1a;下面 capitalize&#xff1a;用大写字母写或印刷 title&#xff1a;标题…
最新文章