Diff 算法、key

概念

DOM diff 就是对比两棵虚拟 DOM 树的算法。
当组件变化时，会得到一个新的虚拟 DOM，diff 算法对比新旧虚拟 DOM 之后，得到一个 patch，然后 React 用 patch 来更新真实 DOM。

如何对比

  • 首先对比两棵树的根节点
    • 如果根节点的类型改变了，比如 div 变成了 p，那么直接认为整棵树都变了，不再对比子节点。此时直接删除对应的真实 DOM 树，创建新的真实 DOM 树。
    • 如果根节点的类型没变，就看看属性变了没有
      • 如果没变，就保留对应的真实节点
      • 如果变了，就只更新该节点的属性，不重新创建节点。
        • 更新 style 时，如果多个 css 属性只有一个改变了，那么 React 只更新改变的。
  • 然后同时遍历两棵树的子节点，每个节点的对比过程同上。

列表渲染中的key

  1. 存在的原因：为了更好地复用dom节点，即列表元素顺序变化时依然可以复用。
  2. 对比规则：
    若旧虚拟DOM中找到了与新虚拟DOM相同的key：
    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM。
    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
  3. 用index作为key可能会引发的问题：
    (1) 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    (2) 如果结构中还包含输入类的DOM：
    会产生错误DOM更新 ==> 界面有问题。
  1. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容