react中创建虚拟DOM有以下两种方式,分别是,
- 使用jsx创建虚拟DOM
- 使用js创建虚拟DOM
下面一一做介绍。
使用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>jsx创建虚拟DOM</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//创建虚拟DOM
const VDOM = (
<div id="box">
<span>Hello,React</span>
</div>
);
//将虚拟DOM渲染到页面
ReactDOM.render(VDOM,document.getElementById("app"));
</script>
</body>
</html>
react.development.js
,react核心库,本例使用的是16.8.0版本,可到这里下载该版本。
react-dom.development.js
,react的扩展库,用于支持react操作DOM,本例使用16.8.0版本,可到这里下载。
babel.min.js
,用于 es6转es5、jsx转js,6.26.0版本,可到这里下载 。
html文件中引入了react.development.js
、react-dom.development.js
,注意,引入顺序有先后:必须react.development.js
在前,react-dom.development.js
在后。
因为本例中使用jsx创建虚拟DOM,因此 ,script标签的type属性必须是text/babel
,不是text/javascript
。type="text/javascript"
相当于告诉浏览器,script标签里有jsx,需要使用babel将jsx转换为js。
虚拟DOM本质上是一个Object
类型对象,即一个普通js对象。
使用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>js创建虚拟DOM</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
//创建虚拟DOM
const VDOM = React.createElement("div",{id:"box"},React.createElement("span",{},"Hello,React"),)
//将虚拟DOM渲染到页面
ReactDOM.render(VDOM,document.getElementById("app"));
</script>
</body>
</html>
因为不是用jsx,而是用js创建虚拟DOM,所以本例中不需要引入babel.min.js,script标签的type属性设置为text/javascript
即可,或者干脆不写(因为type属性的默认值就是text/javascript
)。