虚拟DOM和Diff算法

2018-09-22  本文已影响0人  灯光树影

一、虚拟DOM

虚拟DOM不是真实的DOM,而是一个JS对象。它的作用是判断DOM是否改变、哪些部分需要被重新渲染。这样,不需要操纵真实的DOM,极大的提高了React的性能。

  1. state 数据
  2. JSX语法 模板
  3. 数据 + 模板 生成虚拟DOM(就是用js对象表示真实DOM)
  4. 用虚拟DOM 结构生成真实DOM 渲染页面
  5. state改变
  6. 数据 + 模板 生成新的虚拟DOM
  7. 旧的虚拟DOM和新的虚拟DOM做对比,找出发送改变的DOM
  8. 操作真实的DOM,把改变的内容替换掉
  1. 性能提升了
  2. 它使得跨端应用得以实现。React Native,因为不使用真实DOM,而是虚拟DOM,js对象可以在浏览器,或者node,原生应用中

二、Diff算法

Diff.jpg
上一篇 下一篇

猜你喜欢

热点阅读