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