javascript - ReactJS中ClassicComponentClass和ComponentClass的区别

Question

我为一些 reactJS 组件创建了 typescript 定义，我发现在react.d.ts 文件中有 2 个接口(interface):

interface ComponentClass<P> {
    new(props?: P, context?: any): Component<P, ComponentState>;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    childContextTypes?: ValidationMap<any>;
    defaultProps?: P;
    displayName?: string;
}

和:

interface ClassicComponentClass<P> extends ComponentClass<P> {
    new(props?: P, context?: any): ClassicComponent<P, ComponentState>;
    getDefaultProps?(): P;
}

我看到 ClassicComponentClass 扩展了 ComponentClass，但是什么时候我应该使用其中之一？ (为组件创建定义时)这取决于组件的创建方式吗？

Answer 1

我认为你错过了什么ComponentClass是。

这是一个简短的示例:

interface MyClassClass {
    new (): MyClass;
}

class MyClass {}

let ctor: MyClassClass = MyClass;
let instance: MyClass = new ctor();

在此示例中MyClass就像 React.Component和MyClassClass是 React.ComponentClass .

您的案例中的实际实例是组件而不是组件类，您应该使用它。
如果您不想指定状态，那么您可以简单地执行以下操作:

React.Component<ReachWhateverProps, {}>

---

编辑

首先，将来如果您的评论包含代码(跨越几行)，那么只需编辑您的问题并添加代码并询问后续问题，然后添加一条评论说明您已编辑了您的问题，这将使代码更容易理解。

至于类和实例之间的区别，我认为最好的例子是 javascript Array .
如果你查看定义(在 lib.d.ts 中)，你会看到(取决于它是 ES5 还是 ES6):

interface Array<T> {
    // array instance methods
}

interface ArrayConstructor {
    new (arrayLength?: number): any[];
    new <T>(arrayLength: number): T[];
    new <T>(...items: T[]): T[];
    (arrayLength?: number): any[];
    <T>(arrayLength: number): T[];
    <T>(...items: T[]): T[];
    isArray(arg: any): arg is Array<any>;
    prototype: Array<any>;
}

declare var Array: ArrayConstructor;

(来自 ES5 lib.d.ts )

如您所见，所有实例成员/方法(例如 length 、 push 等)都在 Array<T> 中接口(interface)、ctor 函数和静态类函数(例如 Array.isArray )位于 ArrayConstructor 中定义。

在 javascript 中，类 ctor 只是使用 new 调用的函数。关键字，所以这样:

class A {
    x: number;

    constructor(x: number) {
        this.x = x;
    }
}

编译成:

var A = (function () {
    function A(x) {
        this.x = x;
    }
    return A;
}());

所以A基本上只是一个函数，为了创建一个实例，您只需:

let a: A = new A(5);

所以ctor接口(interface)是:{ new (x: number): A } ，或者:

interface AConstructor {
    new (x: number): A;
}

对于react来说，建议实例数据在 props 中或state而不是作为类(class)成员。
其原因是Component生命周期只知道这些并对它们中的变化使用react。
所以我会做类似的事情:

interface MyComponentProperties {
    id: string; 
    name: string;
}

class MyComponent extends React.Component<MyComponentProperties, {}> {
    render() {
        return <div className={ this.props.id }>{ this.props.name }</div>;
    }
}

let myComponent = <MyComponent id="mc4" name="my component 4" />