React全家桶（一）React入门

Armin444

已于 2022-04-27 16:59:49 修改

阅读量974

点赞数

分类专栏： React全家桶文章标签：前端框架 react

于 2022-04-12 11:35:11 首次发布

本文链接：https://blog.csdn.net/m0_55990909/article/details/124120080

版权

React全家桶专栏收录该内容

7 篇文章 12 订阅

订阅专栏

🔥React全家桶🔥

React全家桶	地址
React全家桶(一)之React入门🔥	https://blog.csdn.net/article/124120080
React全家桶(二)之组件化编程🔥	https://blog.csdn.net/article/124194107
React全家桶(三)之React脚手架🔥	https://blog.csdn.net/article/124281588
React全家桶(四)之axios请求数据🔥	https://blog.csdn.net/article/124281650
React全家桶(五)之React-router路由🔥	https://blog.csdn.net/article/124453733
React全家桶(六)之redux状态管理🔥	https://blog.csdn.net/article/124454379

redux入门

✍目录总览：

一、React简介

1. 框架定义

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目。

2. react可以解决的问题

3. react特点

4.React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

原生JavaScript实现数据渲染（每次渲染从头开始，往100条数据里面添加一条就得重新渲染101条）

React实现数据渲染（与原来的数据进行比较，把新增数据渲染到页面）

二、React基本使用

1. 相关js库

//1.react.js：React核心库。
<script type="text/javascript" src="../js/react.development.js"></script>
//2.react-dom.js：提供操作DOM的react扩展库。
<script type="text/javascript" src="../js/react-dom.development.js"></script>
//3.babel.min.js：解析JSX语法代码转为JS代码的库。
<script type="text/javascript" src="../js/babel.min.js"></script>

babel的作用：
- 将ES6语法转译成浏览器兼容的ES5语法规范
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2. 创建虚拟DOM

2.1通过js创建DOM

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

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

2.2通过jsx创建DOM🔥

只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理。

最终效果：

3. 虚拟DOM与真实DOM

React提供了一些API来创建虚拟DOM。
虚拟DOM对象最终都会被React转换为真实的DOM（否则毫无意义）
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新。

创建虚拟DOM的语法：

//1.创建虚拟DOM
const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
		<span>Hello,React</span>
	</h1>
)

三、React JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是
React.createElement(component, props, ...children)方法的语法糖
作用: 用来简化创建虚拟DOM

写法：
var ele =<h1>Hello JSX<h1>
注意1：它不是字符串, 也不是HTML/XML标签

注意2：它最终产生的就是一个JS对象

1. JSX的基本语法+示例

jsx语法规则：

1.定义虚拟DOM时，不要写引号，渲染不出来。
2.标签中混入JS表达式时要用{}。

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

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

5.只有一个根标签(一个大标签里面多个小标签)

6.标签必须闭合

7.标签首字母

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

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

2.渲染虚拟DOM(元素)

渲染虚拟DOM的语法：

ReactDOM.render(virtualDOM(虚拟dom), containerDOM(真实dom))

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

3. JSX练习

<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" >
		/* 
			一定注意区分：【js语句(代码)】与【js表达式】
					1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
								下面这些都是表达式：
										(1). a
										(2). a+b
										(3). demo(1)
										(4). arr.map() 
										(5). function test () {}
					2.语句(代码)：
								下面这些都是语句(代码)：
										(1).if(){}
										(2).for(){}
										(3).switch(){case:xxxx}
	 */
		//模拟一些数据
		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>