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 并呈现

相关推荐
海参崴-10 分钟前
C++代码格式规范
java·前端·c++
Dxy123931021623 分钟前
JavaScript 如何捕获异常：从基础到进阶的完整指南
开发语言·javascript·udp
谢尔登28 分钟前
【React】setState 触发渲染的流程
前端·react.js·前端框架
摸鱼仙人~1 小时前
Vue中markdown-it基础使用教程
前端·javascript·vue.js
弓.长.1 小时前
ReactNative for OpenHarmony项目鸿蒙化三方库：lottie-react-native — Lottie动画组件
react native·react.js·harmonyos
落魄江湖行1 小时前
入门篇二：Nuxt 4路由自动生成：告别手动配置路由的日子
前端·vue.js·typescript·nuxt4
落魄江湖行1 小时前
入门篇一：Nuxt 4 快速上手：5分钟让项目跑起来
前端框架·nuxt4
CQU_JIAKE2 小时前
4.4【Q】
java·前端·javascript
小陈工2 小时前
Python Web开发入门（十二）：使用Flask-RESTful构建API——让后端开发更优雅
开发语言·前端·python·安全·oracle·flask·restful
木斯佳2 小时前
前端八股文面经大全：字节前端一面（2026-04-03）·面经深度解析
前端·面试题·面经
热门推荐
01GitHub 镜像站点02Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）03VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程05【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线06最新更新版本，OpenClaw v2026.4.2 深度解读剖析：Task Flow 重磅回归与安全架构的全面硬化07纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！08AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南092026年3月AI领域大事件：DeepSeek引领开源风暴10Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程