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

  

上一篇:C#中默认的修饰符


下一篇:3种python调用其他脚本的方法,你还知道其他的方法吗?