javascript - 带有 React 或 Javascript 扩展的子类如何工作？

Question

例如，我了解使用 extends 进行子类化

class Car extends Vehicle {}
class Dog extends Animal {}

但是对于 React，你可能会看到

class HelloMessage extends React.Component {}

React 和 Component 之间的点是什么意思？它在 React 和 vanilla Javascript 中如何工作？

Answer 1

类不必是独立的变量名——它们也可以是对象的属性。所以 extends React.Component，没有 React 的任何其他上下文，只是意味着 React 是一个具有 Component 属性的对象一个类(class)。

有关如何在普通 JS 中模拟它的示例:

const obj = {
  Foo: class Foo {
    doThing() {
      console.log('doing thing');
    }
  }
};

class MySubClass extends obj.Foo {
  subMethod() {
    console.log('submethod');
  }
}

const s = new MySubClass();
s.doThing();
s.subMethod();

React 也在做同样的事情。它只是一种将数据组织为对象属性的方法。