React - React 初识、创建虚拟 DOM 的两种方式、jsx 语法规则、React 定义组件

我命由我123452026-03-12 15:25

一、React 初识

1、演示
html 复制代码 
<!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>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>

	<!-- 此处一定要写 babel -->
	<script type="text/babel">
		const VDOM = <h1>Hello React</h1>;
		ReactDOM.render(VDOM, document.getElementById("test"));
	</script>
</html>
  1. 准备好容器
html 复制代码 
<div id="test"></div>
  1. 引入依赖
html 复制代码 
<script src="../js/react/react.development.js" type="text/javascript"></script>
<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
<script src="../js/react/babel.min.js" type="text/javascript"></script>
依赖 说明
react.development.js React 核心库
react-dom.development.js 用于支持 React 操作 DOM
babel.min.js 用于将 jsx 转为 js
  1. 创建并渲染虚拟 DOM
js 复制代码 
// 1. 创建虚拟 DOM，这里不需要加引号（""）
const VDOM = <h1>Hello React</h1>;

// 2. 渲染虚拟 DOM
ReactDOM.render(VDOM, document.getElementById("test"));
  • 注：如果有多个渲染同一个容器，后面的会将前面的覆盖掉
js 复制代码 
const VDOM2 = <h1>Hello React2</h1>;
ReactDOM.render(VDOM2, document.getElementById("test"));

二、创建虚拟 DOM 的两种方式

1、使用 jsx 创建虚拟 DOM
js 复制代码 
const VDOM = <h1 id="title">Hello React</h1>;
js 复制代码 
const VDOM = <h1 id="title"><span>Hello React123</span></h1>;
js 复制代码 
const VDOM = (
    <h1 id="title">
        <span>Hello React123</span>
    </h1>
);
2、使用 JS 创建虚拟 DOM
js 复制代码 
React.createElement(【标签名】, 【标签属性】, 【标签内容】)
js 复制代码 
const VDOM = React.createElement("h1", { id: "title" }, "Hello React");
js 复制代码 
const VDOM = React.createElement("h1", { id: "title" }, React.createElement("span", {}, "Hello React123"));
  • 注：因为是使用 JS 创建虚拟 DOM，所以不需要引入 Babel
html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>使用 JS 创建虚拟 DOM</title>
	</head>

	<body>
		<div id="test"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script type="text/javascript">
		const VDOM = React.createElement("h1", { id: "title" }, React.createElement("span", {}, "Hello React123"));
		ReactDOM.render(VDOM, document.getElementById("test"));
	</script>
</html>
3、虚拟 DOM 与真实 DOM
（1）基本介绍

  1. 本质是 Object 类型的对象（一般对象）

  2. 虚拟 DOM 比较轻，真实 DOM 比较重，因为虚拟 DOM 是 React 内部使用，无需真实 DOM 上那么多属性

  3. 虚拟 DOM 最终会被 React 转化为真实 DOM 呈现在页面上

（2）演示
html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>虚拟 DOM 与真实 DOM</title>
	</head>

	<body>
		<div id="test"></div>
		<div id="demo"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>
	<script type="text/babel">
		const VDOM = (
			<h1 id="title">
				<span>Hello React123</span>
			</h1>
		);
		ReactDOM.render(VDOM, document.getElementById("test"));

        console.log(VDOM);
        console.log(typeof VDOM);
        console.log(VDOM instanceof Object);

        console.log("------------------------------");

        const TDOM = document.getElementById("demo");
        console.dir(TDOM);
	</script>
</html>
复制代码 
# 输出结果

Object
object
true
------------------------------
div#demo

三、jsx 语法规则

1、基本介绍

  1. 定义虚拟 DOM，不写引号

  2. 标签中混入 JS 表达式时，使用花括号（{}）

  3. 样式的类名指定不用 class，用 className

  4. 内联样式，要用 style={``{【key】: 【value】}} 的形式写

  5. 只能有一个根标签

  6. 标签必须闭合

  7. 标签首字母规则如下

    1. 若小写字母开头，则将该标签转为 HTML 中同名元素，若 HTML 中无该标签对应的同名元素，则报错

    2. 若大写字母开头，React 就去渲染对应的组件，如果组件没有定义，则报错

2、jsx 练习
js 复制代码 
const myId = "title";
const myData = "Hello React123";

const VDOM = (
    <div>
        <h1 className="title" id={myId}>
            <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span>
        </h1>
        <h2>Hello World</h2>
        <input type="text" />
    </div>
);
js 复制代码 
const data = ["Angular", "React", "Vue"];
const VDOM = (
    <div>
        <h1>前端框架</h1>
        <ul>
            {
                data.map((item, index) => {
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    </div>
);
3、JS 表达式与 JS 语句

  1. JS 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，下面这些都是 JS 表达式

    1. a

    2. a + b

    3. demo(1)

    4. arr.map()

    5. function test() {}

  2. JS 语句：下面这些都是 JS 语句

    1. if() {}

    2. for() {}

    3. switch() {}

四、React 定义组件

1、函数式组件
html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>函数式组件</title>
	</head>

	<body>
		<div id="test"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>
	<script type="text/babel">
		function Demo() {
            console.log(this); // 此处的 this 是 undefined，因为 Babel 编译后开启了严格模式
			return <h2>我是用函数定义的组件（适用于简单组件定义）</h2>;
		}

		ReactDOM.render(<Demo />, document.getElementById("test"));
	</script>
</html>
复制代码 
# 输出结果

undefined
  • 执行 ReactDOM 的 render 方法时做了什么

  1. React 解析组件标签，找到了 Demo 组件

  2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM 并呈现

2、类式组件
html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>类式组件</title>
	</head>

	<body>
		<div id="test"></div>
	</body>

	<script src="../js/react/react.development.js" type="text/javascript"></script>
	<script src="../js/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../js/react/babel.min.js" type="text/javascript"></script>
	<script type="text/babel">
		class MyComponent extends React.Component {

            // render 方法是在类的（MyComponent）原型对象上的，供实例使用
            // render 方法中的 this 是 MyComponent 的实例对象（MyComponent 组件实例对象）
			render() {
                console.log(this);
				return <h2>我是用类定义的组件（适用于复杂组件定义）</h2>;
			}
		}
        console.log(MyComponent.prototype);

        ReactDOM.render(<MyComponent />, document.getElementById("test"));
	</script>
</html>
复制代码 
# 输出结果

Component
MyComponent
  • 执行 ReactDOM 的 render 方法时做了什么

  1. React 解析组件标签，找到了 MyComponent 组件

  2. 发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法

  3. 将 render 返回的虚拟 DOM 转为真实 DOM 并呈现

相关推荐
青青家的小灰灰2 小时前
深入理解 JavaScript 箭头函数：从语法糖到核心机制
前端·javascript·面试
cxxcode2 小时前
Web Vitals 数据采集机制分析
前端
sniper2 小时前
AI+Shopify 前端开发：实战一年后，聊聊 AI Agent 和前端的生死局
前端
南囝coding2 小时前
OpenClaw 到底能干什么？可以看看这 60 个真实用例
前端·后端
重庆穿山甲2 小时前
Java开发者的大模型入门：AgentScope Java组件全攻略（二）
前端·后端
我爱吃土豆11193 小时前
从零到上架：Chrome 新标签页生产力扩展 FocusTab
前端·产品
敲代码的约德尔人3 小时前
我在 3 个项目中踩坑后，才真正理解了 JavaScript 设计模式
前端·javascript
子淼8123 小时前
Kali Linux 入门指南：基础操作与常用指令解析
前端
Highcharts.js3 小时前
Highcharts时间线图（Timeline Chart）完全指南：事件序列的可视化叙事图表
javascript·信息可视化·数据分析·highcharts·图表开发·时间线图表
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04得物前端部门，没了05OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07Window 10部署openclaw报错node.exe : npm error code 12808OpenClaw macOS 完整安装与本地模型配置教程（实战版）09npm-error code 128问题解决方法10OpenClaw 接入 QQ Bot 完整实践指南