【React】class组件extends继承原理
在学习React中的
class组件时，先巩固一下ES6中class语法和继承原理，后面介绍如何基于extends实现继承。
class语法
静态属性和方法是属于类本身的，而不是类的实例对象。静态成员通常用于描述类的特征或功能，而不是描述某个具体实例的状态。它们是通过 class 关键字直接定义在类上，而不是通过 constructor 或实例方法定义。实例对象的·__proto__（原型链）会指向类的原型对象（Parent.prototype），但静态成员 不 会出现在实例对象或其原型链中。静态成员只能通过类本身来访问，而不能通过实例来访问。
class Parent{
// new的时候，执行的构造函数「可写可补血，需要接受传递尽量的实参信息，才需要设置constructor」
constructor(x,y){
// this-> 创建的实例
// 创建私有属性total
this.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.average
static average(){}
}
let p = new Parent();
console.log(p,'p')
console.dir(Parent,'Parent')
访问类的静态属性
console.log(Parent.avg); // 10000
Parent.average(); // 调用静态方法
实例p打印如下：
Parent打印如下
基于extends实现继承
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 的源码如下：
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()。
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。
原文地址：https://blog.csdn.net/qq_38951259/article/details/145198440
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！