全家桶（一）React入门-CFANZ编程社区

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

1. JSX的基本语法+示例

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>