1、React：React简介

1、React是什么？

React是用于构建用户界面的JavaScript库(只关注于视图)。

中文官网：网址

英文官网：网址

学习 React 之前前端处理的步骤是

1. 发送请求获取数据
2. 处理数据（过滤、整理格式等）
3. js操作DOM呈现页面

学习 React 之后前端处理的步骤是

1. 发送请求获取数据
2. 处理数据（过滤、整理格式等）
3. 使用React呈现页面，React去操作虚拟DOM(文档对象模型)

总结

React是一个将数据渲染为HTML视图的开源JavaScript库

2、React是谁开发的？

由Facebook开发，且开源

1. 起初由Facebook的软件工程师Jordan Walke创建
2. 于2011年部署于Facebook的`newsfeed
3. 随后在2012年部署于Instagram
4. 2013年5月宣布开源
5. …

3、为什么要学React？

1. 原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI)
2. 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
3. 原生JavaScript没有组件化编码方案，代码复用率低

4、React的特点

1. 声明式设计：声明范式
2. 高效：使用虚拟DOM，减少DOM的交互
3. 灵活：与已知的库或框架完好配合
4. JSX：一种独立的语言，试图解决很多JS的缺陷，ES6包含了几乎所有JSX的特性
5. 组件：代码复用
6. 单向响应数据流：比双向绑定更简单，更快。

5、学习React之前需掌握的JavaScript基础知识

• 判断this的指向
• class(类)
• ES6语法规范
• npm包管理器
• 原型、原型链
• 数组常用方法
• 模块化
• 学习文档：网址

5.1、判断this的指向

以函数的形式调用时，this永远都是window

代码：

	<script type="text/javascript">
		
		//  1.以函数的形式调用时，this永远都是window
		function fun(){
			console.log(this.name);
		}
		var name = "张三";	
    
		fun();//以函数形式调用,this是window
	</script>

控制台输出张三

以方法的形式调用时，this就是调用方法的那个对象

代码：

	<script type="text/javascript">
			 
		function fun(){
			console.log(this.name);
		}
			
		//创建student对象
		var student = {
			name:"张三",
			sayName:fun
		};
			
		var student1 = {
			name:"李四",
			sayName:fun
		};
			
		var name = "哈哈";
		//这里以方法的形式调用,this是调用方法的对象
		student.sayName();			
		student1.sayName();
	</script>

控制台输出：张三 李四

this以构造函数的形式调用时, this指向实例对象

代码：

	<script type="text/javascript">
	 	function Person(age, name) {
         	this.age = age;
         	this.name = name
            console.log(this)  // 此处 this 分别指向 Person 的实例对象 p1 p2
     }
    var p1 = new Person(18, 'zs')
    var p2 = new Person(18, 'ww')
	</script>

通过事件绑定的方法， 此时 this 指向 绑定事件的对象

代码：

	<script type="text/javascript">
		var oBtn = document.getElementById("btn");
	    
	    oBtn.onclick = function() {
	        console.log(this); // btn
    }
    </script>

这里我们可以使用call()方法,apply()方法,bind()方法来改变this的方向

5.2、class(类)

ES6提供了class 关键词作为原型链继承的语法糖来模拟其他主流语言中的类的继承形态，简化了原型的定义的过程。

class(类)的特点

• class(类)简化了原形继承
• class(类)语法定义的成员间不需要使用逗号
• class(类)的本质是函数
• class(类)的属性可以定义在构造函数中也可以直接定义在class中
• class(类)中定义的方法直接使用strict严格模式执行
• class(类)定义在类中的属性无需使用this，方法无需使用this和function，直接使用方法签名+()的形式
• class(类)中使用static关键字设置静态属性和静态方法
• class(类)中可以使用get和set访问器对属性进行访问控制

类的由来：在JavaScript语言中，生成实例对象的传统方法是通过构造函数

eg：

	function Point(x, y) {
	  this.x = x;
	  this.y = y;
}

	Point.prototype.toString = function () {
 	  return '(' + this.x + ', ' + this.y + ')';
};

	var p = new Point(1, 2);

在ES6中提供了更接近传统语言的写法，引入了class类的概念作为对象的模板。通过class关键字，可以定义类。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6的class改写，就是下面这样。

	class Point {
		constructor(x,y) {
		  this.x = x;
		  this.y = y;
		}

		toString() {
		  return '(' + this.x + ', ' + this.y + ')';
		}
	}

这里定义了一个类，可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。这种新的 Class 写法，本质上与本章开头的 ES5 的构造函数Point是一致的。

Point类

Point类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。

ES6的类，完全可以看做构造函数的另一种写法

	class Point {
	  // ...
	}

	typeof Point // "function"
	Point === Point.prototype.constructor // true

5.3、 ES6语法规范

ECMAScript 6简称 ES6，ES6是JavaScript的语法规格，JavaScript是ES6的一种实现

ES6的新特性let、const

let定义的变量不会被变量提升，const定义的常量不能被修改，let 和 const 都是块级作用域

在ES6以前，使用var关键字声明变量。var无论声明在何处，都会被视为声明在函数的最顶部。

eg：使用var声明变量

	console.log(a);
	var a = 'hello';

	//上面的代码相当于
	var a;
	console.log(a);
	a = 'hello';

eg：使用let声明变量不会提升

	console.log(a);
	let a = 'hello';

eg：使用const 定义的常量不能被修改

	var name = "zhangsan";
	name = "lisi";
	console.log(name); // 输出结果是lisi
	
	const name = "zhangsan";
	name = "lisi";
	console.log(name); // 输出结果是zhangsan

import，export

• 全部导入

	import people from './example'

• 导入部分

	import {name,age} from './example'

• 导出默认

	export default App

• 部分导出

	export class App extend Component {}

arrow functions （箭头函数）

函数的快捷写法。不需要function关键字来创建函数，省略return关键字，继承当前上下文的this关键字

语法：

箭头函数的语法很简单，定义自变量，然后是箭头和函数主体。

1. 不引入参数时

	var sum = () => 1 + 2;
	//等同于
	var sum = funtion(){
		return 1 + 2;
}

2. 引入单个参数时

	var res = value => value;
	//等同于
	var res = funtion(value){
		return value;
}

	x => x *x;
	//等同于
	funtion(x) {
		return x * x;
}

箭头函数小细节：当函数有且仅有一个参数的时候，是可以省略 括号 的；当函数中有且仅有 一个表达式 的时候可以 花括号{}

3. 引入多个参数时 引入多个参数时，则应加上小括号

	var sum = (sum1,sum2) => sum1 + sum2;
	//等同于
	var sum = funtion(sum1, sum2) {
		return sum1 + sum2;
}

若你想使用标准的函数体，或者函数体内可能有更多的语句要执行，则要用大括号将函数体括起来，并明确定义返回值。

	var sum = (num1, num2) => { return num1 + num2; }
	//等同于
	var sum = function(num1, num2) {    
	   return num1 + num2; 
};

大括号内的部分基本等同于传统函数

4. 箭头函数若要返回自定义对象的话，就必须用小括号把该对象括起来

	var getTempItem = id = > ({
        id: id,
   	    name: "Temp"
});
    // 等同于:
    var getTempItem = function(id) {
	  return {
	    id: id, 
	    name: "Temp"
     };
};

用小括号包含大括号则是对象的定义，而非函数主体

6、React入门案例

React相关js库

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

注意：react-js核心库必须在react-dom.js之前引入

Hello,React代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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'))//ReactDOM.render(虚拟DOM,容器)
    </script>
</body>
</html>

这里的ReactDOM.render()是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点

语法：ReactDOM.render(virtualDOM, containerDOM)，作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

效果

创建虚拟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'))//ReactDOM.render(虚拟DOM,容器)
    </script>

• 使用纯JS的方式创建 ==>不推荐使用

  • 使用纯JS方式去创建虚拟DOM时，不需要使用到babel

  • 创建语法：const VDOM = React.createElement(标签名,标签属性,标签内容);

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

为什么不推荐使用呢？

下面我们提一个需求，在标签名Hello,React嵌套一个span标签

错误方式,这里会将span标签按照字符串识别

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

正确方式

   const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))

那么使用纯JS去加标签，需要调用React.createElement()方法，如果加很多个的时候，就需要嵌套多个，所以不推荐使用

虽然，我们使用JSX语法去创建虚拟DOM，但是经过babel翻译之后，样式就是我们上边写的纯JS格式，所以我们可以说JSX的这种写法是原生JS写法的语法糖(更加便捷的写法)。

虚拟DOM和真实DOM

虚拟DOM：

• 本质是Object类型的对象(一般对象)
• 虚拟DOM属性少，真实DOM属性多，因为虚拟DOM是React内部在使用，无需真实DOM上那么多的属性
• 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

学习链接：网址