react 类的继承

最新推荐文章于 2024-05-26 05:00:00 发布

原创最新推荐文章于 2024-05-26 05:00:00 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在React中如何进行类的继承，强调了在子类构造器中调用`super`的重要性。`super`作为父类构造器的引用，必须在子类构造函数中优先调用，并且在调用`super()`时通常需要传递参数。此外，还提到了利用`class`关键字创建React组件与传统的继承机制相似。

父类Person有一些公共属性及方法，不需要每次声明构造函数重复写，所以便出现了继承的概念。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello = function () {
        console.log('Hello');
    }
}
class Chinese extends Person {};
const a1 = new Chinese('张三', 14);
console.log(a1);

如果我们在子类中想定义一个自己的构造器呢？
在声明构造器的时候必须同时声明一个super。

class Chinese extends Person {
    constructor(){
        super();
    }
};

为什么一定要在 constructor 中调用 super？
如果一个子类，通过 extends 关键字继承了父类，那么，在子类的 constructor 构造函数中，必须优先调用一下 super()

什么是super？
super 是一个函数，它是父类的构造器；
子类中的 super,其实就是父类中constructor 构造器的一个引用；

调用了super() 之后，实例的属性都变成 undefined ？
因为调用了super()，也需要传参

利用class类创建组件
与继承是类是一个原理

class Movie extends React.Component {
    // render 函数的作用，是 渲染 当前组件所对应的 虚拟DOM元素
    // 必须有一个render函数，他是属性方法
     render() {
       // 在 class 关键字创建的组件中，如果想使用 外界传递过来的 props 参数，不需接收，直接通过 this.props.*** 访问即可
     {/* 注意：在 class 组件内部，this 表示 当前组件的实例对象 */}
         return <h3>{this.props.name}</h3>;
     }
}

ReactDOM.render(<div>
  {/* 这里的 Movie 标签，其实，就是 Movie 类的一个实例对象 */}
  <Movie {...user}></Movie>
</div>, document.getElementById('app'))