React-虚拟DOM

1. react

2. react高效的原因：

3. react核心库：

4. 两种创建虚拟DOM方式

5. 虚拟DOM

6. React JSX简化创建虚拟DOM

---

react官方文档：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

1. react

用于动态构建用户界面的JavaScript库，将数据渲染为HTML视图的开源JS库

2. react高效的原因：

1.react使用虚拟DOM，不总是直接操作页面真实DOM(原生JS直接操作DOM，浏览器hi进行大量的重排重绘)

2. react的DOM Diffing算法，最小化页面重绘(原生JS操作DOM繁琐且效率低)

3.原生JS没有组件化编码方案，代码复用率低

3. react核心库：

react.js：React核心库；react-dom.js：提供操作DOM的react扩展库；bable.min.js：解析JSX语法大妈们转为JS代码的库；prop-type.js

4. 两种创建虚拟DOM方式

使用JS创建虚拟DOM和JSX创建虚拟DOM

1.JS创建虚拟DOM

2.JSX创建虚拟DOM

5. 虚拟DOM

虚拟DOM会被react转化为真实DOM,编码时只需操作真实DOM即可

简单创建虚拟DOM

const VDOM = React.createElement('xx',{id:'xx'},'xx')

例：

6. React JSX简化创建虚拟DOM

var ele =

HELLO

1.基本语法：

1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

2.添加bable.js库

1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

JSX语法规则：

渲染虚拟DOM元素：

ReactDOM.render(虚拟DOM，真实DOM)