React

React简介

0. 高效的原因 ：能够将减少对真实dom的直接操作，将数据转换成虚拟dom，然后映射到真实dom，这个时候就不用直接操作真实dom了，而且假设要对原数据进行修改的话，那么只需要添加新增数据就好（虚拟dom和原来的虚拟dom进行对比），不需要新增真实dom了。

React的基本使用

0. 相关的js库：

   0. react.js ： React核心库

   1. react-dom ：react用来操作dom的

   2. babel ： 将JSX转换为JS

   3. 引入react（代码）：

      ​​

      5. 上述代码主要是创建虚拟dom，然后利用ReactDOM方法将虚拟dom挂在到页面上，还有就是引号注意

      6. JSX的存在意义就是创建虚拟DOM，使用js创建虚拟dom非常的繁琐

      7. 关于虚拟DOM

         1. 本质是Object对象

         2. 和真实的DOM有何区别：虚拟DOM’轻‘，真实DOM重。也就是真实的属性没有那么多

            1. 最终虚拟DOM会经过React变成真实DOM

1. 关于JSX：

   1. 全名叫做JavaScriptXML

      1. XML

         1. 关于XML早期是用于存储和传输数据的（类似于JSON传输）

   2. 主要是react定义的一种特定语法

   3. JSX语法规则：

      1. 如果里面使用了JS语言定义的变量，那么需要加上{}才能够读取相应的值。

         2. 上面的就是{}的使用规则，这里我犯了一个错误就是将第一个div里面的id选择器名称进行了修改，导致我网页报错。实际上只能修改JSX语句，也就是VDOM和下面一行的语句，我修改了JS语句，出错不应该哦。

      2. 还有就是定义虚拟DOM，不需要写引号。

      3. 定义样式的时候，JS是在标签中加入class，但是JSX是在标签中加入className，也就是样式的类名指定。如图：

         2. 用内联样式写也是有区别:需要用双括号的形式{{}}，里面包含的事对象，与JS内联样式是不一样的。