虚拟dom的diff算法

最新推荐文章于 2024-11-06 11:05:01 发布

Lilico_

最新推荐文章于 2024-11-06 11:05:01 发布

阅读量535

点赞数

分类专栏： react 文章标签：算法 javascript 前端

本文链接：https://blog.csdn.net/Lilico_/article/details/122689765

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        经典面试题
        (1) react/vue中的key有什么作用？(key的内部原理是什么？)
        (2)为什么遍历列表时，key最好不要用index？

        1、虚拟dom中key的作用:
        (1)简单的说：key是虚拟dom对象的标识，在更新显示时key起着极其重要的作用
        (2)详细的说：当状态中的数据发生变化时，react会根据新数据生成新的虚拟dom，随后react进行
        新虚拟dom和旧虚拟dom的diff比较，比较规则如下：
        a. 旧虚拟dom中找到了与新虚拟dom相同的key:
        ①若虚拟dom中内容没变，直接使用之前的真实dom
        ②若虚拟dom中内容变了，则生成新的真实dom，随后替换掉页面之前的真实dom

        b.旧虚拟dom中未找到与新虚拟dom相同的key
            根据数据创建新的真实dom，随后渲染到页面

        2、用index作为key可能会引发的问题：
        (1)若对数据进行：逆序添加、逆序删除等破坏顺序的操作：
        会产生没必要的真实dom的更新=>界面效果没问题，但效率低
        (2)如果结构中还包含输入类的dom：
        会产生错误的dom更新=>界面会出问题

        3、注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅渲染列表用于展示，使用index作为key是没有问题的
    -->
</body>
</html>