在React中有两种方式创建虚拟DOM:
萌新作者在线卑微记录自己学习React的历程
代码及笔记 来自 尚硅谷学习视频
1.使用jsx创建虚拟DOM(也是最常用的方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1_使用jsx创建虚拟DOM</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>
<!-- 引入babel,用于将jsx转为js -->
<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(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
2.用js创建虚拟DOM(如果要嵌套很多层标签,会非常麻烦,所以我们一般不使用这种方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2.使用js创建虚拟DOM</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" >
// 此处一定要写javascript
// 1.创建虚拟DOM
//const VDOM = React.createElement(标签名,标签属性,标签内容)
const VDOM = React.createElement('h1',{id:'title'}, React.createElement('span',{},'Hello,React'))
// 2.渲染虚拟DOM到页面
//ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>