Skip to content

reactDOM相关

Jump to bottom
new/bird edited this page Jul 27, 2022 · 1 revision

dom

virtual-element类别

  • 原生DOM元素
  • 自定义元素(react组件)

DOM元素

react里边通过virtual-dom的js对象来描述DOM元素，以js对象的方式，描述dom元素，可以很方便实现复用。这些元素不会真正渲染到页面，而是最终通过原生document方法创建标记的方式，做dom元素的绑定 注意没有方法提供对这个js描述对象的访问，他是不可变的描述对象

// 列入对原生dom元素的描述对象
/*
  现在描述这样一个html结构
  <button>
   <em>Confirm</em>
  </button>
*/ 
  
{
  type: 'button',
  props: {
    className: 'btn btn-blue'
    children: [
     {
       type: 'em',
       props: {
         children: 'Confirm'
       }
     }
    ]
  }
}

组件元素

在上述的条件下，对于DOM元素的描述，可以再一次封装一个通用方法，即函数式组件。

function Button({color, text}) {
  return {
    type: 'button',
    props: {
      className: 'btn btn-blue'
      children: [
      {
        type: 'em',
        props: {
          children: 'Confirm'
        }
      }
     ]
   }
 }
}

// 此时的方法，又可以作为一个元数而存在,即Button类型，再次采用对象方式描述描述这个函数组件

{
  type: Button,
  props: {
   color: 'bule',
   children: 'Confirm'
  }
}

由于存在通用方法的封装，上面的Button方法就是一个列子，可以在此基础上述在此封装集成，实现更丰富的交互Button. 这便是React的和兴思想之一，通过公共方法让元素嵌套或混合，最终形成的组件元素，称之为react组件。最后，再通过递归渲染的方式构建出完全的DOM元素树。

JSX诞生

通过js对象描述dom元素，始终是不方便的。采用JSX方式更能方便书写的同时，提高可读性。

react中，实际开发时并不会做此对象结构的描述，底层react在编译时，会做此等价转换。【这其中也考虑了XSS注入攻击的考虑】。

注释

  • 条件注释，原生的html中，使用条件注释可以如下:
<!--[if xxx]-->
  content
<!--endif-->

而在jsx中如果要使用条件注释，需要使用花括号语法，然后使用js条件表达式，或者是逻辑分支.

  • DOCTYPE

没有闭合的标签，通常在服务端渲染使用。由于没有闭合标签，所以不会渲染。如果需要使用，办法是通过变量保存此标志，然后通过字符串拼接的方式连接。

  • 元素属性

元素除了标签之外，还有属性。按照react的元素分类，DOM元素属性时标准的睡醒，存在列外的是class/for。他们都是js中的关键字，需要做转化

class ==> className
for ==> htmlFor

react组件元素，其属性可以任意传递。而DOM元素则无法传递。自定义属性需要改用小驼峰传递

Clone this wiki locally