React入门实践系列：从零开始构建高效、灵活的用户界面的JavaScript应用

最新推荐文章于 2025-11-25 08:56:07 发布

原创最新推荐文章于 2025-11-25 08:56:07 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ui

React 学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了 React 库，它是用于构建用户界面的 JavaScript 库，具有声明式设计、组件化等特点，因虚拟 DOM 和组件化开发而高效。还讲述了其基本使用，包括相关 js 库、创建虚拟 DOM 的方式，以及 JSX 的简介、语法规则和渲染方法。

一、React 简介

官网

英文官网：https://reactjs.org/
中文官网：https://react.docschina.org/

介绍描述

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库
用于动态构建用户界面(只关注于视图)
采用了组件化开发的思想，通过构建可重用、封装良好的组件来构建复杂的用户界面
简洁、灵活和高效

React 的特点

声明式设计，当数据变动时 React 能高效更新并渲染合适的组件
组件化，构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI
高效，React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互
灵活，在无需重写现有代码的前提下，通过引入React来开发新功能
生态丰富，React 的社区非常活跃，有大量的第三方组件和库可以供开发者使用，提供了丰富的功能和扩展性

React 高效的原因

React 之所以被认为是高效的主要得益于其虚拟 DOM 和组件化开发的特点。虚拟 DOM 使得 React 能够快速计算出需要更新的部分，并只更新这部分内容，从而减少了对实际 DOM 的操作，提高了页面的渲染性能。而组件化开发使得开发者可以将 UI 拆分为独立的、可复用的组件，从而提高了代码的可维护性和重用性，加快了开发速度。

二、React 的基本使用

hello React

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-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>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

创建虚拟 DOM 的两种方式

纯 JS 方式（一般不用）：React 提供了一些 API（如 createElement、createFactory 等）来手动创建虚拟 DOM。

<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript" > 
	//1.创建虚拟DOM
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

JSX 方式：JSX 是一种类似 HTML 的语法扩展，允许在 JavaScript 代码中直接编写类似 HTML 的结构。使用 JSX 可以更直观、更高效地创建虚拟 DOM

<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-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>

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

虚拟 DOM 与真实 DOM

虚拟 DOM 和真实 DOM 是两种表示页面结构的方式。虚拟 DOM 作为一个轻量级的 JavaScript 对象存在，可以在内存中进行操作和比较，而真实 DOM 则是浏览器中实际的页面元素
虚拟 DOM 的好处是可以减少对真实 DOM 的操作，减小了 DOM 操作的成本，从而提高了页面的性能。因为虚拟 DOM 中只包含了发生变化的部分，所以在进行 diff 算法比较时可以更快速地确定需要更新的部分
当虚拟 DOM 发生改变时，React 会通过 diff 算法找出需要更新的部分，并把这些变化应用到真实 DOM 上，从而实现页面的更新
关于虚拟DOM：
- 本质是 Object 类型的对象（一般对象）
- 虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性
- 虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上

<!-- 准备好一个“容器” -->
<div id="test"></div>
<div id="demo"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-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>

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<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(typeof VDOM);
	console.log(VDOM instanceof Object);
</script>

三、React JSX

简介

全称: JavaScript XML
react 定义的一种类似于 XML 的 JS 扩展语法：JS + XML 本质是 React.createElement(component, props, …children) 方法的语法糖
作用：用来简化创建虚拟 DOM
- 写法：var ele = <h1>Hello JSX!</h1>
- 它不是字符串, 也不是 HTML/XML 标签
- 它最终产生的就是一个 JS 对象
标签名任意：HTML 标签或其它标签
标签属性任意：HTML 标签属性或其它
babel.js的作用
- 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行
- 只要用了 JSX，都要加上type="text/babel" , 声明需要 babel 来处理
基本语法规则
- 定义虚拟 DOM 时，不要写引号
- 标签中混入JS表达式时要用 {}
- 样式的类名指定不要用 class，要用 className
- 内联样式，要用style={{key:value}}的形式去写
- 只有一个根标签
- 标签必须闭合
- 标签首字母
  - 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
  - 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx语法规则</title>
	<style>
		.title{
			background-color: orange;
			width: 200px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-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>

	<script type="text/babel" >
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

渲染虚拟 DOM 元素

语法：ReactDOM.render(virtualDOM, containerDOM)
作用：将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
- 参数一：纯 js 或 jsx 创建的虚拟 DOM 对象
- 参数二：用来包含虚拟 DOM 元素的真实 DOM 元素对象(一般是一个div)

JSX 练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-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>

	<script type="text/babel" >
		//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>