学习笔记 React（一）Hello React例子及创建虚拟DOM的两种方式

白鸽同学

已于 2022-09-20 07:13:18 修改

阅读量257

点赞数

分类专栏：学习笔记 React 文章标签： react.js 学习 javascript

于 2022-09-12 08:09:30 首次发布

本文链接：https://blog.csdn.net/sure0911/article/details/126812470

版权

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

1 篇文章 0 订阅

订阅专栏

React官网地址
React库
最基础的例子

官网

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

React库

babel.min.js（ES6 => ES5 JSX => JS）

react.development.js（核心库）

react-dom.development.js（扩展库）

prop-types.js（用来校验父组件传递过来值的类型）

最基础的例子

下面是一个没有基于脚手架写的例子：

例子中有三个需要注意的地方

1、JS加载是有顺序的，严格执行下面的顺序；

2、虚拟DOM的值不可以加引号；

3、<script type="text/babel">，不要写成了text/javascript，一定要写babel

<!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>

上面代码中，这句话就是直接用的JSX去创建虚拟DOM。

const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */

问题来了，我们为什么不用原生的JS，要用JSX呢？还要重新学JSX，JS究竟怎么了？

仔细再来对比一下，先看JSX创建虚拟DOM的例子

<!-- 这三个库还是需要引入，因为要用JSX -->

<!-- 引入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 */
    const VDOM = <h1 id="title">Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

运行后生成代码如下，主要看第3行：

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"><h1>Hello,React</h1></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>

再来看用JS创建虚拟DOM，这里不需要再引入babel.min.js了，因为不需要写JSX了：

仔细看下面的注释

<!-- 这三个库还是需要引入，因为要用JSX -->

<!-- 引入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/javascript" >

    // const VDOM = document.createElement.....
    // 上一行代码中，React也有对应的语法，但是要React的API要相应简单。只不过不同的是
    // document.createElement...创建的是真实DOM，React创建的是虚拟DOM。

    //1.创建虚拟DOM
    // React.createElement(标枪名,标签属性,标签内容)
	const VDOM = React.createElement('h1',{id:'title'},'Hello React-js') 
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

运行后生代码如下：

<div id="test"><h1 id="title">Hello React-js</h1></div>

写到这里，发现JSX实现的内容，JS也可以实现，那为什么还要学JSX，再来深入一点点看一个例子，就立刻知道了JSX的香了。。。

需求：在上面的h1标签里再包含一下span标签，应该怎么写程序呢？

JSX写法：

 const VDOM = <h1 id="title"><span>Hello,React</span></h1>

运行结果如下：

<h1 id="title"><span>Hello,React</span></h1>

JS写法，如果JS这样写：

const VDOM = React.createElement('h1',{id:'title'},'<span>Hello React-js</span>')

运行结果是把<span>Hello React-js</span>直接输出到了页面上。因为标签体内容写标签程序是不认的，所以还是再创建一个DOM

所以JS要这样改造一下才行，循环嵌套createElement：

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

这样运行出来就对了，那么如果再来几层嵌套，JS这种写法就显得力不从心了。

也就是说，JSX可以更加简单的创建多层虚拟DOM，写起来更加流畅，JSX也可以按层次写代码，但要用小括号包起来，如：

	<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>

总结一下，浏览器不认识上面的代码，所以要通过写<script type="text/babel" >来翻译代码，翻译过来的代码，其实就变成上刚写的循环嵌套的JS的代码，省去了人为编写JS嵌套代码。

JSX就是原始JS创建虚拟DOM的语法糖（简写方法，便捷方式）。

所以创建DOM的两种方法，一个是JS，一个是JSX，但是一般不用JS。