React学习计划-React16--React基础（一）虚拟DOM与JSX

1. 初识虚拟DOM

1. 描述
   1. 什么是虚拟DOM呢？本质是Object类型的对象（一般对象）
   2. 我们为什么要了解虚拟DOM呢?很简单，因为React要用
2. 我们第三点会使用React分别使用js和jsx创建虚拟DOM，在此呢，我们先要了解两大js库：
   1. react.js：react的核心库
   2. react-dom.js：用于支持react操作DOM
   3. 注意：加development表示开发模式的库
3. 开始进入对比分析
   1. 我们先使用用js创建虚拟DOM
      

运行效果：

如图分析：

一、React.createElement函数创建虚拟DOM需要三个参数，若是想要内部添加字标签，继续使用React.createElement创建
1. 标签体
2. 标签属性
3. 标签内内容
二、ReactDOM.render将虚拟DOM渲染到页面中需要两个参数
1. VDOM虚拟DOM
2. 渲染的容器document.getElementById('test')

2. 在React中呢，我们大都使用.jsx语法，可以理解为和.js一样，就是文件后缀不一样。现在我们用.jsx语法创建虚拟DOM
   

运行效果:

如图分析：

1. 我们使用.jsx语法也能创建虚拟DOM，结构和我们的html一致，更加方便阅读与编程
2. 我们的样式可以写在外部
3. 我们在使用.jsx语法的时候注意一点，是script标签的type一定要写babel，并且要将babel引入，而babel的主要作用就是将jsx转为js。
4. 当然我们有很多方法去吧babel下载到本地，比如访问官网；再比如我们直接打开此链接;甚至可以访问稍微低一点旧的版本的babel;当然包括我在上面所用的版本

3. 虚拟DOM和真实DOM来一波比较，React为什么要用虚拟DOM?
   

运行效果:

进行分析：

1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较’轻’,真实DOM比较’重’,因为虚拟DOM是React内部在用，无需真实DOM上那么多属性
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

2. jsx语法规则：

认识了虚拟DOM之后，我们也通过对比知道了使用jsx创建虚拟DOM要比js更加方便编写与阅读，所以react使用jsx语法编写代码，那么就介绍下jsx的语法规则:

1. 定义虚拟DOM时，不要写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定要用className,不要用class
4. 内联样式要用style={{key: value}}的形式去写
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母
   1. 若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
   2. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。这提一嘴组件，我们下节就介绍组件。

示例：