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就会去渲染对应的组件,如果组件没有定义,会报错