React-day1

一：什么是react

react全家桶：react基础   react-router   pubsub ant-design

原生js渲染界面步骤：1。发生请求获取数据 2.处理数据（过滤，整理格式）3.操作DOM呈现页面

react用于构建用户界面的js库，操作DOM呈现页面

原生js操作DOM繁琐，效率低

原生js直接操作DOM，浏览器会进行大量的重排重绘

原生js没有组件化编码方案，代码复用率低

构成页面三要素 html/css/js

只拆jjs叫模块化

全拆叫组件化

一：react特点

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

2.在react Native中可以使用react语法进行移动端开发（用js编写安卓应用和ios应用）

3.使用了虚拟DOM+Diffing算法，尽量减少与真实的DOM交互（虚拟DOM在内存中）

二：react需要掌握的js基础知识

class（类）

判断this的指向

es6语法

npm包管理

原型，原型链

数组常用的方法

模块化

二：class类和对象

1：面向对象特点：

1：抽取（抽象）对象的公用的属性和行为组织（封装）成一个类（模板）

2：对类进行实例化，获取类的对象

对象的概念

对象是一个具体的事物，JavaScript中对象是一组无序的相关属性和方法的集合，所有的事物都是对象。

对象由属性和方法组成

1.属性：事物的特征，在对象中用属性表示

2.方法：事物的行为，在对象中用方法来表示

类（class）概念

es6新增语法，用关键字class声明

类抽取了对象的公共部分，它泛指某一大类

对象特指某一个，通过类实例化的具体对象

2：js创建类

关键字class

3：类constructor构造函数

 constructor()方法是类的构造函数（默认方法），

通过new命令生成对象实例时，自动调用该方法，

如果没有显示定义，类的内部就会自动创建一个 constructor()

用js创建类和生成实例对象

被创建的两个实例对象tsy，cjy

 

 注意：

1：通过class关键字创建类，类名首字母大写

2：类里有个constaructor函数，可以接收传递过来的参数，同时返回实例对象

3：constaructor函数只要new生成实例时，就会自动调用这个函数，如果声明类时没有写这个函数，类也会自动生成这个函数

4：生成实例（对象）用new

 3：在类中添加方法

4：类的继承extends

 注意！！！！

原因虽然子类继承了父类的方法，也可以调用，但是，注意父类方法中的this指向问题。

父类方法中的this指向的是自身的constructor，所有在子类找不到父类中的this

super()

super()将子类中的数据传递给父类

此时可以通过super()调用父类中的constructor构造函数

 注意：

如果子类和父类中有一样的方法且子类继承了发类，此时通过子类的实例调用改方法，则会调用子类中的方法

 1：在继承中如果实例化一个子类输出一个方法，先看子类有没有这个方法，有就先执行子类的方法，没有就去父类中找。就近原则

super也可以调用父类中的方法

 super必须放到子类this前面

必须先调用父类的构造函数，在使用子类构造方法

5：类和对象的三个注意点

1：在ES6中类是没有变量提升的，必须先定义类，才能通过类实例化对象

2：类里面的公有属性和方法一定要加this使用

3：类里this的指向问题:cousrructor里的this指向实例对象，方法里的this指向调用者

三：构造函数和原型 

在es6之前,创建对象不是基于类创建的，而是用构造函数来创建对象的。

创建对象的三种方式：1，对象字面量 2，new Object()  3，自定义构造函数 

1：构造函数

1：构造函数是一种特殊的函数，和new一起使用，

注意：构造函数用于创建某一类对象，其首字母要大写。构造函数要和new关键字一起用 

2：new在执行会做的4件事

：在内存在创建一个新对象

：让this指向这个新对象

：指向构造函数里的代码，给这个对象添加属性和方法

：返回这个对象（所有构造函数里不需要return）

3：实例成员和静态成员

构造函数中的属性和方法称为成员

构造函数里的成员分为两大类：1实例成员，2静态成员

什么是实例成员

实例成员就构造函数内部通过this添加的成员就是实例成员

实例成员只能通过实话的对象访问

 什么是静态成员

在构造函数本身上添加的成员就是静态成员

2：构造函数原型对象prototype

构造函数问题，存在浪费内存问题

如果在一个构造函数的成员中出现function类型，在创建对象实例时就会单独在内存中开辟一个空间，几个对象就会开辟几个空间，

1：原型对象prototype

构造函数通过原型分配的函数是所有对象共享的

每一个构造函数都有一个prototype属性，指向一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法都会被构造函数所拥有。

我们可以把一些不变的方法，直接定义到prototype对象上，这样所有的实例对象就可以共享这些方法，不用在内存中开辟新的空间了

3：实例对象原型__proto__

每个实例对象都会有一个属性__proto__指向构造函数的prototype原型对象

之所以实例对象可以调用构造函数prototype原型对象的属性和方法，就是因为有__proto__原型的存在

实例对象上系统自己会添加一个__proto__指向构造函数的原型对象prototype

实例对象的__proto__和构造函数的prototype对象是等价的

注意：查找规则，先在实例对象身上查找有没有这个方法，有就执行，没有就通过__proto__在构造函数原型对象prototype身上找

__proto__只是指向构造函数原型对象，并不能直接拿来赋值

4：coustructor构造函数

对象原型(__proto__)和构造函数（prototype）原型对象里面都有一个constructor属性。

coustructor称之为构造函数，因为它指回构造函数本身

coustructor主要用于记录该对象引用与哪一个构造函数

5：构造函数，实例，原型对象三者之间的关系

 6：原型链

只要是对象就有__proto__属性

构造函数原型对象（prototype）也是对象，所有也有__proto__属性

 7:对象成员查找规则

1：当访问一个对象属性（包括方法）时，首先查找这个对象自身有没有该属性

2：如果没有就去找它的原型（也就是__proto__指向的prototype原型对象）

3：如果还没有就查找原型对象的原型（Object的原型对象）

4：以此类推一直找到Object（null）

即顺着原型链由下向上查找

8：原型对象this指向问题 

构造函数中的this指向对象实例

原型对象中的this指向实例对象

9：利用构造函数原型扩展内置对象

可以通过原型对象，来给原来的内置对象扩展一些自定义方法。

列：给js原数组对象添加求和方法

10：es6新增对象方法

定义性属性或修改原属性

Object.defineProperty (目标对象，目标属性，{value,writable,enumerable,configurable})

Object.keys(obj)

或对象所有属性并以数组的形式展示

 

四：this 

 1：this的指向

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法指向实例对象
对象方法调用	该方法的调用者
事件绑定方法	邦定事件对象
定时器函数	window
立即执行函数	window

2：箭头函数的this

箭头函数不能绑定this关键字，箭头函数中的this指向的是函数定义位置的上下文this

3：改变this指向

call   apply  bind

这三个方法都可以改变this指向

区别：

:call和apply会调用函数，并且改变this指向。

:call和apply传递的参数不一样，call传递参数的形式，aru1,aru2,..。apply必须以数组的形式传递[arg]

:bind不会调用函数，可以改变this指向

主要应用场景

call做继承

apply跟数组有关系，比如借助数学对象实现最大值最小值

bind不调用函数，但改变this指向，比如改变定时器内部的this指向

五：数组的常用方法