9 react 基础 - 虚拟DOM

一.虚拟DOM

　　React 原理

　　1. 存放 state 数据

　　2. JSX 模版

　　3. 数据 + 模版 结合， 生成真实的DOM， 来显示

　　eg: <div id='abc'><span>hello word</span></div>

　　4. 生成虚拟DOM(虚拟DOM就是一个JS 对象， 用来描述真实DOM)

　　eg: ['div', {id:'abc'}, ['span', {}, 'hello world']]

　　5. state 发生变化

　　eg: <div id='abc'><span>bye bye</span></div>

　　6. 数据 + 模版 结合生成 虚拟DOM(虚拟DOM就是一个JS 对象， 用来描述真实DOM)

　　eg: ['div', {id:'abc'}, ['span', {}, 'bye bye']]

　　7. 比较原始虚拟DOM 和 新的虚拟DOM 的区别， 找到区别的span内容

　　8. 直接操作DOM, 改变 span 中的内容

二. 深入了解虚拟DOM

标签：span,DOM,模版,eg,react,虚拟,bye
来源： https://www.cnblogs.com/zonehoo/p/11637297.html