初识React，基本理解和使用

枕頭說他不想醒

已于 2022-10-26 17:20:37 修改

阅读量568

点赞数 2

分类专栏： React 文章标签： react.js javascript 前端

于 2022-10-26 17:19:55 首次发布

本文链接：https://blog.csdn.net/weixin_52984349/article/details/127535545

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、React 介绍

1、是什么

2、React的特点

二、React的基本使用 ——Hello React

1、使用js创建虚拟DOM（createElement）

一、React 介绍

1、是什么

（1）用于动态构建用户界面的 JavaScript 库(只关注于视图)

（2）发送请求获取数据

（3）处理数据(过滤、整理格式等)

（4）操作DOM呈现页面

2、React的特点

（1）采用组件化模式，声明式编码，提高开发效率和组件复用率

（2）在React Native中可以使用React语法进行移动端开发。

（3）使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互。

二、React的基本使用 ——Hello React

1、先准备一个容器

<div id="root"></div>

2、引入react.js

在本案例中React只需要引入3个js文件，顺序不能乱

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

3、编码

(1)创建虚拟DOM

（2）渲染虚拟DOM到页面

    <script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
	//2.渲染虚拟DOM到页面 React没有提供选择器，所以只能用原生的方法
	ReactDOM.render(VDOM,document.getElementById('root'))

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

1、使用js创建虚拟DOM（createElement）

<!-- 准备好一个“容器” -->
	<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>

2、使用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" >
		//1.创建虚拟DOM
		const VDOM = (  
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

总结：jsx创建虚拟DOM就是js创建虚拟DOM的语法糖，使用原生js在标签嵌套的时候会很麻烦，使用jsx就会很容易，类似于我们的html，有了jsx可以让我们创建虚拟DOM更加方便，通过引入babel，用于将jsx转为js其实就是将jsx转为上图的js形式。

3、关于虚拟DOM：

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

2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，

无需真实DOM上那么多的属性。

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

四、jsx的语法规则

1、jsx是什么

（1）全称: JavaScript XML

（2）react定义的一种类似于XML的JS扩展语法: JS + XML

（3）作用: 用来简化创建虚拟DOM

2、jsx语法规则：

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

2.标签中混入JS表达式时要用{}。

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

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中

无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有

定义，则报错。