React虚拟dom的两种创建方式
1，使用jsx创建虚拟DOM
案例代码
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<body>
<!--准备好一个容器 -->
<div id="test"></div>
<!-- 加载 React。引入react核心库-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入babel，用于jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel，不写默认js*/
//1，创建虚拟dom
const VDOM=<h1 id="title"><span>Hello,React</span></h1> //此处不要加引号，因为不是字符串
//2，渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
2，用js创建虚拟DOM
案例代码
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!-- 加载 React。引入react核心库-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></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>
3，虚拟DOM与真实DOM
虚拟DOM：
- 本质是object类型的对象（一般对象）
- 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM上那么多的属性
- 虚拟DOM最终会被react转化为真实DOM，呈现在页面上。
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
<body>
<!--准备好一个容器-->
<div id="test"></div>
<div id="demo"></div>
<!-- 加载 React。引入react核心库-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入babel，用于jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel，不写默认js*/
//1，创建虚拟dom
const VDOM=<h1 id="title"><span>Hello,React</span></h1> //此处不要加引号，因为不是字符串
//2，渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
console.log('虚拟dom',VDOM);//对象
console.log(typeof VDOM);//object
console.log(VDOM instanceof Object);//true
const TDOM = document.getElementById('demo')
console.log('真实dom',TDOM);//标签
debugger;
console.log(typeof TDOM);//object
console.log(TDOM instanceof Object);//true
/*
* 关于虚拟dom
* 1，本质是object类型的对象（一般对象）
* 2，虚拟dom比较“轻”，真实dom比较“重”，因为虚拟dom是react内部在用，无需真实dom上那么多的属性
* 3，虚拟dom最终会被react转化为真实dom，呈现在页面上。
* */
</script>
</body>
腾讯云开发者
