2.创建虚拟dom的两种方式
程序员文章站
2022-07-12 17:16:09
...
使用jsx语法创建虚拟dom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react核心库 -->
<script type="text/javascript" src="package/react.development.js"></script>
<!-- react操作dom的 -->
<script type="text/javascript" src="package/react-dom.development.js"></script>
<!-- 转码器 -->
<script type="text/javascript" src="package/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<!-- 支持jsx语法 -->
<script type="text/babel">
// 创建虚拟dom
const VDOM = <h1 id="title">
<span>hello,react</span>
</h1>
// 渲染虚拟dom
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>
使用js方式创建虚拟dom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react核心库 -->
<script type="text/javascript" src="package/react.development.js"></script>
<!-- react操作dom的 -->
<script type="text/javascript" src="package/react-dom.development.js"></script>
<!-- 转码器 -->
<!-- <script type="text/javascript" src="package/babel.min.js"></script> -->
</head>
<body>
<div id="test"></div>
<!-- 支持jsx语法 -->
<script type="text/javascript">
// 创建虚拟dom
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span','','hello react'));
// 渲染虚拟dom
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>
总结
jsx是一个语法糖，最终会被babel翻译成js给浏览器执行。