【React】class组件extends继承原理

在学习React中的class组件时，先巩固一下ES6中class语法和继承原理，背面先容怎样基于extends实现继承。
class语法

静态属性和方法是属于类本身的，而不是类的实例对象。静态成员通常用于形貌类的特性或功能，而不是形貌某个具体实例的状态。它们是通过 class 关键字直接界说在类上，而不是通过 constructor 或实例方法界说。实例对象的·__proto__（原型链）会指向类的原型对象（Parent.prototype），但静态成员 不 会出如今实例对象或其原型链中。静态成员只能通过类本身来访问，而不能通过实例来访问。

1. class Parent{
2.         // new的时候，执行的构造函数「可写可补血，需要接受传递尽量的实参信息，才需要设置constructor」
3.         constructor(x,y){
4.                 // this-> 创建的实例
5.                 // 创建私有属性total
6.                 this.total = x+y;
7.         }
8.         num = 200;// 等价于this.num=2000;
9.         getNum=()=>{//添加私有属性getNum
10.                 //箭头函数没有自己的this,所用到的this是宿主函数中的
11.                 console.log(this);
12.         }
13.         sum(){
14.                 //类似sum= function(){}不是箭头函数
15.                 //它是给Parent.prototype上设置公共方法「sum不是可枚举的」
16.         }  
17.         static avg = 10000;
18.         //把构造函数当作一个普通对象，为其设置静态的私有属性方法 ，Parent.average
19.         static average(){}
20. }
21. let p = new Parent();
22. console.log(p,'p')
23. console.dir(Parent,'Parent')

复制代码

1. 访问类的静态属性
2. console.log(Parent.avg);  // 10000
3. Parent.average();  // 调用静态方法

复制代码

实例p打印如下：

Parent打印如下

基于extends实现继承

1. class Parent extends React.Component{
2.         constructor(props){
3.                 super(props);//继承 React.Component 构造器，初始化 props
4.         }
6.         x=100;
7.         getX(){ }
8. }
10. let p = new Parent(10);
11. console.log(p)

复制代码

1、起首基于call继承 React.Component.call(this)，此中this->arent类的实例p，给创建的实例p设置四个私有属性：props、context、refs、updater
Component 的源码如下：

1.   function Component(props,context,updater){
2.      this.props = props; // 存储传入的 props（组件的属性）
3.      this.context = context; // 存储上下文对象（用于跨组件传递数据）
4.      this.refs = emptyObject; // 存储组件引用，用于获取子组件实例或 DOM 节点
5.          this.updater = updater || ReactNoopUpdateQueue;//ReactNoopUpdateQueue，这是一个默认的更新队列，用于在 React 中触发组件更新。
6.   }

复制代码

2、再基于原型继承Parent.prototype._proto_ === React.Component.prototype
通过 call 继承完成初始化之后，实例的__proto__会指向 Parent.prototype，同时 Parent.prototype 的 __proto__ 会指向 React.Component.prototype，还备React.Component.prototype原型上提供的方法（isReactComponent、setState、forceUpdate）,原型链的指向：实例-> Parent.prototype->React.Component.prototype->Object.pototype;
3、只要设置了 constructor,则内部第一句话肯定要实行super()

• super(props) 会调用父类（React.Component）的构造函数，确保父类的初始化逻辑（即 React.Component.call(this)）被实行，同时将 props 转达给父类的构造函数。
  
• 如果没有界说 constructor，JavaScript 会主动提供一个默认的构造函数，它会隐式调用 super()。
  

1. class Parent extends React.Component{
2.         // constructor(n,m){
3.          // 调用父类（React.Component）的构造函数
4.          
5.         //         super()  //=>React.Component.call(this),此时this.props=undefined,this.context=undefined this.refs={}
6.        
7.         //         // super(10) 此时this.props = 10;
8.        
9.         // }
11.         constructor(props){
12.             //确保父类构造函数被调用，this.props 会被正确初始化
13.                 super(props);
14.         }
16.         x=100;
17.         getX(){ }
18. }
20. let p = new Parent(10);
21. console.log(p)

复制代码

总结一下：

• 继承的实现：通过 extends React.Component，子类 Parent 继承了 React.Component，而且拥有了 React.Component 中界说的全部生命周期方法（如 componentDidMount、render 等）以及 setState、forceUpdate 等方法。
  
• 调用 super(props)：在子类 Parent 的构造函数中，super(props) 调用了 React.Component 的构造函数，使得 this.props 得到正确初始化。这个步调是必须的，由于没有它，this.props 会是 undefined。
  
• 原型链：当 Parent 类实例化时，它会继承 React.Component.prototype 上的全部方法。原型链结构是：实例 -> Parent.prototype -> React.Component.prototype -> Object.prototype。