why

简单来说就是解决原生js重复操作真实dom的情况

how

就是通过虚拟dom的方式来解决多次操作真实dom的情况。

原生js每次操作dom都是使用全量的方式的来进行的，原来已经存在的dom对于新的dom产生毫无影响，而react做的就是通过多加一层的虚拟dom，让已经存在的dom可以进行复用，进行增量更新，这样数据量越大就越能够显示出react的优点。

为什么react官方会推荐使用jsx的语法？

原因就是在进行标签的多层嵌套的的时候，使用原生js新建虚拟dom的时候，代码量会非常的繁琐，不如使用jsx简洁

创建虚拟dom的两种方式

• 使用原生js

• 使用jsx，但是在实际执行的时候，浏览器是将jsx创建虚拟DOM的方式转换为js创建虚拟dom的方式

虚拟DOM本质就是一般对象object

虚拟DOM一般比较“轻”。因为虚拟DOM是react内部在用，不需要那么的属性，够用就行。

虚拟DOM最终会转换为真是DOM，呈现在页面上。

what

三个核心库

• react react核心库
• react-deveployment 虚拟DOM库
• 将jsx转化为js库

jsx语法规则

1. jsx的标签中不需要引号
2. 标签中混入js表达式，需要加上大括号{}
3. 样式的名字不要用class而要用className
4. 内联样式要使用style={}
5. 虚拟DOM有且只有一个根容器
6. 标签必须闭合
7. 标签首字母
   • 若是小写字母开头，则将标签会自动转化为html中的同名标签。如果html中没有该元素，就会报错
   • 若是大写字母开头，react就会去渲染对应的组件，如果组件没有定义，会报错