这是我参与【第四届青训营】笔记创作活动的第8天。

1、相关库介绍

旧版本：16.8.4 （March 5, 2019）

新版本：有不一样的会说明

核心库。
react-dom.js：提供操作 DOM 的 React扩展库。
babel.min.js：解析 JSX 语法代码转为 JS 代码的库。

【补充】 babel.js 的作用：

浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行
只要用了 JSX，都要加上 type="text/babel", 声明需要 babel 来处理

2、使用JSX 创建虚拟 DOM

const VDOM =　<h1>Hello,React</h1>

3、渲染虚拟 DOM（元素）

语法: ReactDOM.render(virtualDOM, containerDOM)

作用: 将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示

参数说明：

参数一: 纯 js 或 jsx 创建的虚拟 dom 对象
参数二: 用来包含虚拟 DOM 元素的真实 dom 元素对象（一般是一个div）

<body>    
    <!-- 准备一个容器 -->   
    <div id="test">    
    </div>     
    
    <!-- 引入react核心库 -->     
    <script src="js/react.development.js"></script>    
    <!-- 引入react-dom，用于支持react操作Dom -->    
    <script src="js/react-dom.development.js"></script>    
    <!-- 引入babel，用于将jsx转为js -->    
    <script src="js/babel.min.js"></script>    
    <!-- 一定要将type设为babel,才能使用jsx --> 
    <script type="text/babel">        
        // 1.创建虚拟DOM         
        // 此处一定不能加引号，因为不是字符串        
        const VDOM = <h1> Hello,React</h1>                 
        // 2.渲染虚拟DOM到页面        
        ReactDOM.render(VDOM,document.getElementById('test'))     
    </script>
</body>

4、效果展示

5、创建虚拟 DOM 的两种方式

5.1、纯 JS 方式（一般不用）

<div id="test"></div> 
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js">
</script> 
<script type="text/javascript" >  
    //1.创建虚拟DOM 
    const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React')) 
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test')) 
</script>

5.2、JSX 方式

JSX 方式就是原生 JS 方式创建虚拟 DOM 的语法糖。

<div id="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> 
<script type="text/javascript" src="../js/react-dom.development.js"></script> 
<script type="text/javascript" src="../js/babel.min.js"></script> 
<script type="text/babel" > /* 此处一定要写babel */ 
    //1.创建虚拟DOM const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */ 
    <h1 id="title">
        <span>Hello,React</span> 
    </h1> ) 
    //2.渲染虚拟DOM到页面 
    ReactDOM.render(VDOM,document.getElementById('test')) 
</script>

效果展示：

6、虚拟 DOM 与真实 DOM

打印输出虚拟 DOM 和真实 DOM 进行比较。

const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */ 
    <h1 id="title"> 
        <span>Hello,React</span>
    </h1> 
) 
    
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test')) 

const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM); 
debugger;

打印结果：