React知识点总结

最近因为疫情在家里呆着，没事总结总结知识点，以后也能当笔记用。

1、constructor( )构造方法
这是ES6对类的默认方法，通过new命令生成对象实例时自动掉用constructor()方法，该方法是类必须有的，如果没有显示定义，就会默认添加空的constructor()方法。
ES5中，JavaScript是没有继承的写法的，因此，通过使用prototype来达到目的。例如：

//构造函数People
function People(name,age){
	this.name = name;
	this.age = age;
}
People.prototype.sayName = function()){
	return '我的名字是：'+this.name;
}
//创建新的子类p1
let p1 = new People('小明',20);

但是在ES6中，可以通过class来实现。例如：

class People{
	//构造方法constructor就等于上面的构造函数People
	constructor(name,age){
		this.name = name;
		thiis.age = age;
	}
	sayName(){
		return '我的名字是：'+this.name;
	}
}
//创建新的子类p1
let p1 = new People('小明',20);

上面两个例子等价。
其实class方法完全就是对象原型的语法糖，效果是一样的。

2、组件中的额constructor是否有必要？如果没有呢？

ES5的继承，实质是先创造子类的实例对象this，然后在将父类的方法添加到this上面Parent.apply(this)。ES6的继承机制完全不同，实质是先创造父类的实例对象this，所以必须先掉用super方法，然后在用子类的构造函数修改this。
如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说不管有没有显示定义，任何一个子类都有constructor方法。

class ColorPoint extends Point {
}

// 等同于 
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

// 可见没有写constructor，在执行过程中会自动补上

由于ES6的继承规则得知，不管子类写不写constructor，在new实例的过程都会给补上constructor。
所以：constructor钩子函数并不是不可缺少的，子组件可以在一些情况略去。

接下来，看下有无constructor钩子函数的区别：
A、有无钩子函数的this.constructor
1、先看有constructor钩子函数的this.constructor

render ---child ******** f child(props){
     _classCallCheck(this,child);
     var _this = _possibleConstructorReturn(this,(Child.__proto__||  Object.getPrototypeOf(Child)).call(this,props));
     //console.log...
}

2、无constructor钩子函数的this.constructor

render ---child ********  f Child(){
	var _ref;
	var _temp,_this,_ret;
	_classCallCheck(this,Child);
	for(var _len = arguments.length,args = Array(_len),_key=0;_key<_len;_key++)
}

如果看细节，会得知有constructor钩子函数的时候，Child类会多一个constructor方法。

B、再看有无constructor钩子函数的this，也就是组件实例。
有钩子函数的this实例。

无钩子函数的this实例

会得知有constructor钩子函数时候，可以定义state，如果用户不定义state的话，有无constructor钩子函数时候没有区别。

结论： 如果组件要定义自己的state初始值，需要写在constructor钩子函数中，如果用户不使用state，纯用props接收参数，有无钩子函数都可以，如果不使用state，建议可以使用无状态组件。

3、super()继承
在class方法中，继承是使用extends关键字来实现的。举例如下：

class People(){
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	sayName(){
		return '我的名字是：'+this.name;
	}
}
class demo extends People{
	constructor(name,age,sex){
		super(name,age); //掉用父类的constructor(name,age)
		this.sex =sex;
	}
	printMsg(){
		return this.sex +' ' + super.sayName(); //掉用父类的sayName()
	}
}

上面的例子中，出现了super()，子类必须在constructor()掉用super()方法，否则新建实例时会报错。
报错原因：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象，没有 this 对象而要对 this 进行处理，能不报错吗？

class People(){
	//代码片段
}
class P1 extends People(){
	constructor(){}
}
let P11 = new P1(); //ReferenceError报错

上面的代码中，P1继承了父类People，但是它的构造函数没有掉用super()方法，导致新建实例时报错。
出现上面这种情况的原因在于ES5的继承机制与ES6完全不同，就是在ES5的继承中，先创建子类的实例对象this，然后再将父类的方法添加到this上（ Parent.apply(this) ）。而ES6采用的是先创建父类的实例this（故要先调用 super( )方法），完后再用子类的构造函数修改this。

知识点：
1.子类如果没有 constructor 方法，该方法会被默认添加，即任何的子类都有 constructor 方法，无论定义没定义，它就在那里，不离不弃。
2.在子类的构造函数 constructor( )中，只有调用 super( )方法之后，才可以使用 this关键字，否则会报错。

4、super中的props是否必要？作用是什么？
有的小伙伴每次写组件都会习惯在constructor和super中写上props，那么那个是必要的吗？

首先要明确的一点是：
可以不写constructor，一旦写了constructor，就必须在此函数中写super()，
此时组件才能有自己的this，在组件的全局中都可以使用this关键字，否则如果只是constructor而不执行super()那么以后this都是错的！

但是super中必须写参数props吗？？ 答案是不一定，先看代码：
有props:


没有props:


可以得出结论：
当想在constructor中使用this.props的时候，super需要加入props，此时用props也行，用this.props也行，他们是一个东西。不过props可以是任意参数，this.props是固定写法。
如图：

如果在custructor生命周期不使用 this.props或者props时候，可以不传入props。
下面是一个使用props的场景，此时别忘了 componentWillReceiveProps 生命周期哟。

接上：如果constructor中不通过super来接收props，在其他生命周期，

诸如componentWillMount、componentDidMount、render中能直接使用this.props吗？？

结论：可以的，react在除了constructor之外的生命周期已经传入了this.props了，完全不受super(props)的影响。

所以super中的props是否接收，只能影响constructor生命周期能否使用this.props，其他的生命周期已默认存在this.props