React 入门使用 – yang 的博客

1. React 入门简介

1. 1 官网

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

1.2 介绍描述

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

1.3 React 特点

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

1.4 React高效的原因

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

1.5 怎么学好React

学习React之前你要掌握的Javascript 基础知识

判断this的指向
class（类）
ES6语法规范
npm包管理器
原型、原型链
数组常见方法
模块化

2. React基本使用

2.1 基础代码

在编写React前需要先引入React 的js代码库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/react-dom.development.js"></script>

    <!-- 引入babel：
            1. ES6 ==> ES5
            2. jsx ==> js
    -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 1. 创建虚拟 DOM
        const VDOM = <h1>yang hello world，React</h1>

        // 2. 渲染到页面中的指定 DOM
        // ReactDOM.render(虚拟DOM，真实DOM)
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

2.2 js说明

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。

    <!-- 引入React核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel ES6==>ES5  JSX==>JS -->
    <script src="../js/babel.min.js"></script>

这里涉及到3个库文件，一个react（核心库），react-dom（用于支持react操作dom的）还有一个babel（将jsx语法转成js语法，因为浏览器只能识别js），还有就是script标签中的type需要写成text/babel，因为script标签中要写jsx的语法，这里再说一点，就是你引入了react-dom库，就可以使用ReactDOM变量了，跟以前学习jquery一样，引入jquery文件就可以使用$和jquery是同样的道理.

2.3 创建虚拟Dom的两种方式

2.3.1 使用原生js创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript">
    //1. 创建虚拟DOM
    const VDOM =  React.createElement('h1',{id:'title'},'yang Hello React')   /*此处一定不要写引号 因为不是字符串*/

    //2. 渲染虚拟DOM 到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>

使用原生js来创建虚拟dom时，此时script标签的type就不需要写成text/babel，写成原来的text/javascript就可以了，同时也可以删除babel库了，因为不需要它进行转换，浏览器本身就能识别

2.3.2 使用jsx语法创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器  test -->
<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">Hello React</h1>
    const VDOM = (  /*此处一定不要写引号 因为不是字符串*/
        <h1 id="title">
            <span>yang Hello React</span>
            </h1>
            )
    //2. 渲染虚拟DOM 到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>

这里可能会有小伙伴会问，为什么不用js来创建dom呢？我看写起来也还行啊，这是因为你还没见过结构嵌套的情况，当需求改为h1标签内再嵌套一个span标签，你怎么办？是不是后面还得再继续套React.createElement(‘span’,{},‘span内容’) ，那如果继续嵌套呢？是不是废了。。。，所以这里就能看出jsx的好处了，其实babel将jsx转换后的代码就相对于用原生js写的那样，只不过这些不用你写，babel帮你转换。

2.4 虚拟DOM与真实DOM

React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

2.4.1 关于创建的虚拟dom

本质上其实就是一个object对象；
虚拟dom上的属性比较少，真实dom属性多，因为虚拟dom只在recat内部使用，用不到那么多的属性
虚拟dom最终会被react转换成真实dom，呈现再页面上.

2.4.2 JSX语法

定义虚拟dom时不要用引号
标签中引入js表达式要用{}
如果在jsx要写行内样式需要使用style={{coler：red}}形式
样式的类名指定不能写class，要写className;
只有一个根标签
标签必须闭合
标签首字母
①若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；

<!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" >
		/* 
			一定注意区分：【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>
</html>

2.5 什么是JSX

JSX概念：JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模版的方式

jsx本质：jsx 并不是标准的js语法，它是js的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行

babel官网：https://www.babeljs.cn/

3. 模块与组件、模块化与组件化的理解

3.1 模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

3.2 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

3.3 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

3.4 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用