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

前言

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

react key解析原理

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

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

vue key解析原理

底层逻辑基本喝react相似。

条件渲染

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

富文本展示

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

javascript 复制代码
<div dangerouslySetInnerHTML={{
                    __html:<div>富文本解析</div>
                }}></div>

总结

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

相关推荐
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship2 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑2 小时前
「AI」网站模版,效果如何?
前端·后端·产品