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 790761e143754aada168108d90b13e37.png

运行效果： 790761e143754aada168108d90b13e37.png

如图分析：

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

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

运行效果: 790761e143754aada168108d90b13e37.png

如图分析：

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

运行效果: 790761e143754aada168108d90b13e37.png 进行分析：

  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就去渲染对应的组件，若组件没有定义，则报错。这提一嘴组件，我们下节就介绍组件。

示例： 790761e143754aada168108d90b13e37.png