Skip to content

React中的虚拟DOM

什么是虚拟DOM

  • 为了提升性能，每次render只更新diff的dom，diff部分是使用js对象进行对比的，在js中创建对象对比与dom直接对比，相对来说js对象性能影响更加。
    • 流程举例
      1. state数据
      2. render内使用JSX模版进行转换
      3. 将数据 与 模版结合（虚拟DOM就是一个js对象，用它来描述真实DOM）（损耗了性能）
        • ['div', {'id': 'a'}, ['span', {}, 'hello world']]
      4. 用虚拟DOM的结构生成真实的DOM ，新DOM如下
        • <div id='a'><span>hello world</span></div>
      5. state 发生变化
      6. 数据 + 模版 生成新的虚拟DOM（极大的提升了性能）
        • ['div', {'id': 'a'}, ['span', {}, 'hello Harris']]
      7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）
      8. 直接操作dom，改变span中的内容

深入了解虚拟DOM

  • 执行流程 JSX -> createElement -> 虚拟DOM（JS 对象） -> 真实的DOM
  • 优点
    1. 性能提升了。
    2. 它使得跨端应用得以提升，React Native。

虚拟DOM中的Diff算法

  • 同层比较
    Image title
    假设右侧为上一次的diff左侧第一层与右侧对比，如果与右侧有差异会直接删除左侧第一层下的所有节点，重新生成虚拟DOM
  • 增加key值，使用key值进行比较，这也就是为什么在定义index时不建议使用map的index，建议使用value等唯一性较大的key
    Image title
    在上下对比关系中，左侧为没有key值，右侧为有key值的情况下，比较容易程度显而易见