9 react 基础 - 虚拟DOM

一.虚拟DOM

　　React 原理

　　1. 存放 state 数据

　　2. JSX 模版

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

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

　　4. 用虚拟DOM的结构生成真实的DOM， 来显示

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

　　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

　　render 方法内

　　　　返回 JSX 语法 与 返回 React.createElement() 方法所生成的效果是一样的

　　　　eg: 下面两种产生的效果相同

　　　　　　JSX:

　　　　　　　　return <div><span>div span</span></div>

　　　　　　React.createElement:

　　　　　　　　return React.createElement('div', {}, React.createElement('span', {}, 'div span'))

　　虚拟DOM 可以理解为

　　　　将 JSX  转化为  createElement 对象  再转化为  虚拟DOM(js 对象)  再转化为 真实的DOM

　　虚拟DOM 带来的好处

　　　　1.性能提升 (DOM 比对 编程 js 比对)

　　　　2.他使得跨端应用得以实现 (React Native, 再网页中 将虚拟 DOM 转化为组件，再App中将 虚拟DOM 转化为 app 组件， 使得 React 开发变得简介)

 

三. 虚拟DOM 中的 Diff (diffrence) 算法  (虚拟 DOM 的 比对方式)

　　调用 setState 时 会运行 Diff 算法

　　同级比较

　　　　先比较顶层 DOM

　　　　　　如果 顶层有差异 (替换全部的DOM)

　　使用 稳定的 key 值 做 标记 便于 虚拟DOM 比对