一.虚拟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