虚拟DOM的两种创建方式

Posted 2021-08-11 ~往无前

一、虚拟DOM的两种创建方式：

1.使用jsx创建虚拟DOM

 <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库  先导入核心库再导入其他的库--> 
  <script type="text/javascript" src="../js/oldVersion/react.development.js"></script>
  <!-- 引入react.dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/oldVersion/react-dom.development.js"></script>
  <!-- 引入babel,用于将jsx转为js -->
  <script type="text/javascript" src="../js/oldVersion/babel.min.js"></script>
  
  <!-- 此处一定要写babel -->
  <script type="text/babel">
    //1.创建虚拟DOM
    const VDOM=<h1>hello,React</h1> /*此处一定不要写引号，因为不是字符串*/
    //2.渲染虚拟DMO到页面  这里需要手动的获取dom节点
    ReactDOM.render(VDOM,document.getElementById("test"))
  </script>

2.使用js创建虚拟DOM

 <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库  先导入核心库再导入其他的库--> 
  <script type="text/javascript" src="../js/oldVersion/react.development.js"></script>
  <!-- 引入react.dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/oldVersion/react-dom.development.js"></script>
  
  <!-- 此处写的就是javascript-->
  <script type="text/javascript">
    //1.创建虚拟DOM
    const VDOM=React.createElement('h1',{id:'title'},hello,React)
    //2.渲染虚拟DMO到页面  这里需要手动的获取dom节点
    ReactDOM.render(VDOM,document.getElementById("test"))
  </script>

二、使用js和jsx的区别就是：

1.不需要引入jsx的babel库

2.手动创建DOM元素

jsx的优势就是可以简单的创建虚拟DOM。而使用js书写会比较繁琐。然后通过babel翻译为上面js中所写的内容。

三、关于虚拟DOM：

1.本质是object类型的对象(一般对象)

2.虚拟DOM比较"轻"，只是DOM比较"重"，因为虚拟DOM是React内部在用，无需只是DOM上那么多属性。

3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。