reactjs - 为什么一些开发人员在 React.js 的类中使用构造函数和 super？

Question

我总是在我的组件中使用这个表达式:

class Cart extends Component { }

最近我看到很多代码都使用了这个表达式。

class Cart extends React.Component {
  constructor(props) {
    super(props);
  }
}

这是为什么呢？使用构造函数和super的目的是什么？React.Component 和 Component 相同吗？为什么我们要在构造函数和 super 中传递 props？我不是在问 super 和构造函数是什么，我是在问上面两个代码之间的区别以及使用每个代码的好处？

我上网查了一下，没有看到任何解释，只有代码示例。

Answer 1

构造函数和 super 不是特定于 React 的，甚至不是特定于 javascript 的。它们特定于OOP中的继承。

构造函数

构造函数可以称为类中的初始化函数。让我们看一个可以使用构造函数的示例。

class parentClass {
 constructor(){
   this.foo = foo;
   this.bar = bar;
}

function sharedMethod1(){
    print(this.foo);
}

function sharedMethod(){
    print(this.bar)
}
}

object1 = new ParentClass(foo1, bar1);

object1.sharedMethod1() // this will print foo1;
object1.sharedMethod2() // this will print bar1;

object2 = new ParentClass(foo2, bar2);
object2.sharedMethod1() // this will print foo2;
object2.sharedMethod2() // this will print bar2;

当需要创建具有不同成员变量/函数值的类的多个实例时，我们使用构造函数。

super

super 关键字也用于继承。在继承中，当从父类扩展子类时，需要初始化父类的构造函数。 super 关键字就是用于此目的。让我们看一下下面的 super 示例。

class ParentClass (){
constructor(){
this.foo = foo;
}
} 

class childClass extends ParentClass(){
super(foo1); // super is used here initialize the constructor of the ParentClass
} 

React 中也遵循上述相同的原则。请在此处查看 dan abramov 关于构造函数和 super 的博客文章 https://overreacted.io/why-do-we-write-super-props/