【React】class组件extends继承原理

class语法

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

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

javascript">访问类的静态属性
console.log(Parent.avg);  // 10000
Parent.average();  // 调用静态方法

实例p打印如下：
在这里插入图片描述
Parent打印如下

基于extends实现继承

javascript">class Parent extends React.Component{constructor(props){super(props);//继承 React.Component 构造器，初始化 props}x=100;getX(){ }
}let p = new Parent(10);
console.log(p)

1、首先基于call继承 React.Component.call(this)，其中this->Parent类的实例p，给创建的实例p设置四个私有属性：props、context、refs、updater

Component 的源码如下：

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

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()。

javascript">class Parent extends React.Component{// constructor(n,m){// 调用父类（React.Component）的构造函数// 	super()  //=>React.Component.call(this),此时this.props=undefined,this.context=undefined this.refs={}// 	// super(10) 此时this.props = 10;// }constructor(props){//确保父类构造函数被调用，this.props 会被正确初始化super(props);}x=100;getX(){ }
}let p = new Parent(10);
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。