reactJS中ClassicComponentClass和ComponentClass的区别

Question

我为一些 reactJS 组件创建了我的打字稿定义，我看到在 react.d.ts 文件中有 2 个接口：

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> 接口中，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接口是：{ new (x: number): A }，或者：

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

关于react，建议在props或state中有实例数据，不要作为类成员。
这样做的原因是 Component 生命周期只知道这些并对它们的变化做出反应。
所以我会做这样的事情：

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" />