ThatManK Mobile Article
虚拟DOM的两种创建方式
02_虚拟 DOM 的两种创建方式
- 方式一：JSX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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(VDOM, document.getElementById("test"));
</script>
</body>
</html>- 方式二: JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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">
//1.创建虚拟DOM
const VDOM = React.createElement(
"h1",
{ id: "title" },
React.createElement("span", {}, "Hello,React")
);
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>