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的语法和使用的规则就可以了。

相关推荐

  1. react 列表渲染 key解析 vuekey解析底层逻辑

    2024-05-04 05:28:03       14 阅读
  2. ReactKeydiff

    2024-05-04 05:28:03       12 阅读
  3. 我们一起聊聊React列表渲染Key

    2024-05-04 05:28:03       44 阅读
  4. Vuekey作用原理

    2024-05-04 05:28:03       32 阅读
  5. vue key原理作用

    2024-05-04 05:28:03       5 阅读
  6. React 学习-6-列表 & keys

    2024-05-04 05:28:03       10 阅读
  7. rediskey问题怎么解决

    2024-05-04 05:28:03       35 阅读
  8. vuekey 原理

    2024-05-04 05:28:03       11 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-04 05:28:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-04 05:28:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-04 05:28:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-04 05:28:03       18 阅读

热门阅读

  1. C++11 设计模式6. 建造者模式,也叫做生成器模式

    2024-05-04 05:28:03       11 阅读
  2. Python基础学习之数据结构

    2024-05-04 05:28:03       10 阅读
  3. 指针(1)

    指针(1)

    2024-05-04 05:28:03      8 阅读
  4. Mybatis扩展

    2024-05-04 05:28:03       9 阅读
  5. 彻底理解-进程的 概念、 组成、特征

    2024-05-04 05:28:03       12 阅读
  6. SpringWebFlux提供模拟CRUD的RouteFunction类型的api请求

    2024-05-04 05:28:03       6 阅读
  7. 如何成为一个能量充沛的人

    2024-05-04 05:28:03       10 阅读
  8. pyqt5报错

    2024-05-04 05:28:03       12 阅读