React中的虚拟 DOM 以及 JSX 的语法规则
一、虚拟dom和真实dom
虚拟dom：
真实dom：
二、JSX语句规则
<!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语法规则</title>
<style>
.title {
background-color: orange;
width: 200px;
}
</style>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable，将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
const myId = 'test';
const myData = 'Hello React';
// 1.创建虚拟dom(h1里面包含span)
const VDOM = (
<div>
<h1 id={myId} className="title">
<span style={{ color: 'red' }}>{myData}</span>
</h1>
<input type="text" name="" id=""/>
</div>
);//jsx中此处不要写引号，因为不是字符串
//2.渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
三、JSX 小练习
<!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小练习</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable，将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 表示写的是jsx -->
<script type="text/babel">
//模拟数据
let data = ['Vue', 'React', 'Angular'];
// 1.创建虚拟dom(h1里面包含span)
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item, index) => {
return <li key={index}>{item}</li>;
})
}
</ul>
</div>
);//jsx中此处不要写引号，因为不是字符串
//2.渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
