<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<style>
.two{
color:red;
}
<style>
</head>
<body>
<div id="root">
</div>
</body>
<script>
{
// 创建真实DOM
// document.createElement()
// 创建虚拟DOM(英文：virtual dom)
// React.createElement()
}
// 生成React容器
const root = ReactDOM.createRoot(document.querySelector("#root"));
{
// 1-字符串当中的HTML标签不会被浏览器识别
root.render("<a>字符串</a>")
}
{
// 2- 可以通过React.createElement创建虚拟DOM,然后通过root.render接收即可
// createElement一般使用三个参数
// 1- 标签的名字（type) 必须填写
// 2- 指定属性 (props) 可以省略
// 3- 指定包裹的内容。（props.children） 可以省略
// 以下虚拟DOM对应着 <div id="one" class="two">最近有没有什么好看电影啊</div>
// const div = React.createElement("div",{
// id:"one",
// className:"two"
// },"最近有没有什么好看电影啊");
// console.log(div);
// root.render(div);// 如果render接收的是一个属性DOM,会将虚拟DOM转为真实DOM进行渲染。
}
{
// 3-第二个参数不可以直接跳过,如果没有属性可以设置，那么可以将第二个参数设置为空对象或null
// const span = React.createElement("span",{},"span标签");
// const span = React.createElement("span",null,"span标签");
// root.render(span);
}
{
// 4- 如果结构比较复杂，使用React.createElement不太适宜。
// 4-1 如果指定的内容是字符串，字符串中又使用了标签，那么虚拟DOM转为真实DOM,不会将span作为浏览器识别标签。
// const div = React.createElement("div",{className:"two"},"<span>span标签</span>");
// root.render(div);
// 4-2 可以先创建span,再创建div,将span(虚拟DOM)作为div的第三个参数
const span = React.createElement("span",null,"span标签");
const p = React.createElement("p",null,"p标签");
// 从第三个参数开始为包裹的元素
// const div = React.createElement("div",{className:"two"},span,span,span,span,span,p);
// 也可以将包裹的元素放置到数组中
const div = React.createElement("div",{className:"two"},[span,span,span,span,span,p]);
root.render(div);
}
{
// 总结：React.createElement可以创建虚拟DOM,可以将创建好的虚拟DOM作为参数传递给render,render会将虚拟DOM转为真实DOM
// 但是React.createElement不太适合复杂的界面设计。
}
</script>
<html>
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
