Skip to main content

React中的虚拟DOM

React使用的是虚拟DOM 页面渲染性能非常高

这一节 我们来讨论一下什么是虚拟DOM，为什么虚拟DOM给前端页面渲染带来了非常有变革性的改变？

我们知道react的state（数据）一旦发生改变，render（相当于模板）就会被触发，然后页面被重新渲染

假设我们没有react，怎么去实现类似于react这样的机制呢？

思路1​

  • 1, state数据
  • 2, JSX模版
  • 3, 数据+模版结合，生成真实的DOM，在页面显示
  • 4, state发生改变
  • 5, 数据+模版结合，生成真实的DOM，替换原始的DOM

缺陷：

  • 第一次生成了一个完整的DOM片段
  • 第二次生成了一个完整的DOM片段
  • 第二次的DOM替换第一次的DOM，非常耗性能

思路2​

  • 1, state数据
  • 2, JSX模版
  • 3, 数据+模版结合，生成真实的DOM，在页面显示
  • 4, state发生改变
  • 5, 数据+模版结合，生成真实的DOM，并不直接替换原始的DOM
  • 6, 新的DOM（DocumentFragment）和原始的DOM作对比，找差异
  • 7, 找出input框发生的变化
  • 8, 只用新的DOM中的input元素， 替换掉老的DOM中的input元素

缺陷：性能的提升并不明显

思路3​

  • 1, state数据
  • 2, JSX模版
  • 3, 数据+模版结合，生成虚拟DOM（虚拟DOM就是一个js对象，用它来描述真实DOM） -- 损耗了性能 ['div',{id:'abc'},['span',{},'hello world']](数组的三项分别对应着tag，属性，children)
  • 4, 用虚拟DOM的结构生成真实的DOM，在页面显示：<div id='abc'><span>hello world</span></div>
  • 5, state发生改变
  • 6, 数据+模版结合，生成新的虚拟DOM（极大的提升了性能) ['div',{id:'abc'},['span',{},'bye bye']]
  • 7, 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span力的内容 （极大的提升了性能）
  • 8, 直接操作DOM，改变span中的内容

其实react底层就是这个思路

思考​

react为什么可以提高性能呢？

减少了对真实DOM的创建及真实DOM的对比，取而代之的是创建的都是js对象，对比的也都是js对象，react底层实现了极大的性能飞跃