流殃的博客

| Comments

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

Comments

评论