003-004 虚拟DOM的两种创建方式、虚拟DOM与真实DOM

十一.3662026-04-12 8:28

虚拟DOM的两种创建方式

纯js方式（一般不用）
jsx方式：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello_react</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript" > /* 此处一定要写babel */
  //1.创建虚拟DOM
  //React.createElement(标签名称，标签属性，标签内容)
  const VDOM =React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello React'))
  //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>

运行结果

虚拟DOM与真实DOM

关于虚拟DOM:

本质是Object类型的对象（一般对象）。

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

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello_react</title>
</head>
<body>
<!-- 准备好一个"容器" -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入bable，用将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel" > /* 此处一定要写babel */
  //1.创建虚拟DOM
  //React.createElement(标签名称，标签属性，标签内容)
  const VDOM =( <h1 id="title"><span>Hello,React</span></h1>
  )
  //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    console.log('虚拟DOM',VDOM);
    console.log(typeof VDOM);
    console.log(VDOM instanceof Object);
</script>
</body>
</html>

运行结果