「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
虚拟DOM和真实DOM
- 虚拟DOM本质是一个object对象
- 虚拟dom比较轻真实dom比较重,因为虚拟dom的react内部在用,没有真实dom那么多属性
- 虚拟dom最后要变成真实dom渲染在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "test"> </div>
<div id = "demo"> </div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入dom,用于支持react操作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>
<!-- 此处要写bable -->
<script type="text/babel" >
// 1.创建虚拟DOM
const VDOM = <h1>
<span>hello react</span>
</h1>
// 2.将虚拟DOM渲染到页面
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log("虚拟DOM"+VDOM)
console.log("真实DOM:"+TDOM)
console.log(TDOM)
console.log(typeof VDOM)
debugger
</script>
</body>
</html>
JSX语法规则
1.定义虚拟DOM时不要写引号
2.如果要使用js表达式要加{}
3.样式的类名指定不要用class,要用className
4.内联样式，要使用style = {{key:value的形式去写}}
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1)若首字母小写，则会转换为对应的html标签，如果找不到则报错
(2)若首字母大写，则会去找对应的组件进行渲染，如果找不到则报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
<style>
.title{
background-color: blue;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "test"> </div>
<div id = "demo"> </div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入dom,用于支持react操作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>
<!-- 此处要写bable -->
<script type="text/babel" >
const apple = 'apple is sweet'
const VDOM =(
<div>
<h1>
<span className ="title" style ={{fontSize:'200px'}}>{apple}</span>
</h1>
<input/>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
