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。

在您的案例中，实际实例是组件而不是组件 class，您应该使用它。
如果你不想指定一个状态，那么你可以简单地做：

React.Component<ReachWhateverProps, {}>

编辑

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

至于class与实例之间的区别，我认为最好的例子是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）

如您所见，所有实例 member/methods（例如 length、push 等）都在 Array<T> 接口中，ctor 函数和静态 class 函数（例如 Array.isArray）在 ArrayConstructor 定义中。

在 javascript class 中，构造函数只是使用 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 中包含实例数据，而不是 class 成员。
这样做的原因是 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" />

reactJS 中 ClassicComponentClass 和 ComponentClass 的区别

difference between ClassicComponentClass and ComponentClass in reactJS

javascript

interface

definition

typescript

reactjs

编辑