创建虚拟DOM的两种方式和JSX的语法规则
Posted 天界程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了创建虚拟DOM的两种方式和JSX的语法规则相关的知识，希望对你有一定的参考价值。
1、传统的javascript创建方式
调用方法：React.createElement(参数1,参数2,参数3)
参数1：创建的标签的名称——和html的标签同名
参数2：标签的属性——如：id等
参数3：填充标签的内容
<!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>Hello React</title>
</head>
<body>
<!-- 准备好员工“容器” -->
<div id="app"></div>
<!-- 引入ReactJS核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
<!-- 引入React-DOM核心库，用于操作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','Hello React')
// 2、将虚拟DOM渲染到页面
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
</body>
</html>
注意：第二个参数在没有内容并且第三个参数有值的时候，第二个参数也要用来占位，不能省略。
2、jsx的创建方式
jsx的方式比较简单，直接创建DOM结构，最后交给react去渲染即可。
<!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>Hello React</title>
</head>
<body>
<!-- 准备好员工“容器” -->
<div id="app"></div>
<!-- 引入ReactJS核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
<!-- 引入React-DOM核心库，用于操作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>
<!-- 此处类型为babel -->
<script type="text/babel">
// 1、创建虚拟DOM
const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串
// 2、将虚拟DOM渲染到页面
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
</body>
</html>
3、比较明显的区别
- 对于复杂的dom结构，js的方式需要方法嵌套，而jsx不需要。
- jsx的结构层次分明，而js的方式对于复杂的结构比较混乱，维护较困难。
- jsx代码简洁，js方式代码冗长。
4、jsx的语法规则
- 定义虚拟DOM时，不要写括号
- 标签中混入JS表达式时要用
- 样式的类名指定不要用
class，要用className - 内联样式，要用
style=key：value的形式去写 - 只有一个根标签
- 标签必须闭合
- 标签首字母小写，则该标签会转为
html中同名元素，若html中无该标签对应的同名元素则报错 - 若标签首字母大写，
react就去渲染对应的组件，若组件没有定义，则报错
<!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>Hello React</title>
<style>
.title
width: 100%;
background-color: orange;
</style>
</head>
<body>
<!-- 准备好员工“容器” -->
<div id="app"></div>
<!-- 引入ReactJS核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
<!-- 引入React-DOM核心库，用于操作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>
<!-- 此处类型为babel -->
<script type="text/babel">
const myId = 'Genius'
const myData = 'Hello,React'
// 1、创建虚拟DOM
const VDOM =(
<div>
<h2 className="title" id=myId.toLocaleLowerCase()>
<span style=color:'white'>myData.toLocaleLowerCase()</span>
</h2>
<input type="0"/>
</div>
) // 此处不能加引号，因为不是字符串
// 2、将虚拟DOM渲染到页面
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
</body>
</html>
以上是关于创建虚拟DOM的两种方式和JSX的语法规则的主要内容，如果未能解决你的问题，请参考以下文章
react准备阶段，虚拟DOM的两种创建方式-虚拟DOM的两种创建方式-JSX语法规则