React学习day01--虚拟DOM的两种创建方式

一、使用js的方式创建虚拟DOM

使用js这种创建虚拟DOM的方式相对jsx来说是繁琐的，如果标签是深层次嵌套，那么书写非常耗时且麻烦。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/javascript">// 1.创建虚拟DOMconst vDOM = React.createElement('h1',{id: 'title'},React.createElement('span'，{},'hello,world'))// 2.渲染虚拟DOM到页面ReactDOM.render(vDOM,document.getElementById('test'))</script>
</body></html>

二、使用jsx的方式创建虚拟DOM

使用jsx的方式创建虚拟DOM，就像写HTML标签一样方便且有层次感，可以说jsx是js这种方式写法的语法糖，react内部编译也是通过js的方式创建，然后将虚拟DOM渲染到页面；不过react帮我们做了复杂的转换，我们无需关心。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/babel">// 1.创建虚拟DOMconst vDOM = (<h1 id="title"><span>Hello,React</span></h1>)// 2.渲染虚拟DOM到页面ReactDOM.render(vDOM,document.getElementById('test'))</script>
</body></html>