Javascript reactJS中ClassicComponentClass和ComponentClass的区别

我为一些

reactJS

组件创建了我的typescript定义，我发现在react.d.ts文件中有两个接口：

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

接口组件类
{
新（道具？：P，上下文？：任意）：组件；
propTypes？：ValidationMap
；
contextTypes？：ValidationMap；
childContextTypes？：ValidationMap；
defaultProps？：P；
displayName？：字符串；
}

以及：

接口ClassicComponentClass
扩展ComponentClass
{
新（道具？：P，上下文？：任意）：ClassicComponent；
getDefaultProps？（）：P；
}

---

我看到ClassicComponentClass扩展了ComponentClass，但是什么时候我应该使用其中的一个呢？（为组件创建定义时）这是否取决于组件是如何创建的？

我认为您缺少什么是

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, {}>

（来自ES5

lib.d.ts

）

正如您可以看到的，所有实例成员/方法（如

length

、

push

等）都在

Array

界面中，ctor函数和静态类函数（如

Array.isArray

）都在

ArrayConstructor

定义中

在javascript类中，构造函数只是使用

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

中，而不要作为类成员。
原因是

组件

生命周期只知道这些，并对其中的更改作出反应。
所以我会做一些类似的事情：

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

接口MyComponentProperties{
id：字符串；
名称：字符串；
}
类MyComponent扩展了React.Component{
render（）{
返回{this.props.name}；
}
}
设myComponent=

我认为您缺少的是

组件类

下面是一个简短的例子：

interface MyClassClass {
    new (): MyClass;
}

class MyClass {}

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

在本例中，
MyClass
类似于
React.Component
，
MyClassClass
是
React.ComponentClass

您案例中的实际实例是组件，而不是组件类，您应该使用它。

如果您不想指定状态，则只需执行以下操作：

React.Component<ReachWhateverProps, {}>

（来自ES5
lib.d.ts
）

正如您可以看到的，所有实例成员/方法（如
length
、
push
等）都在
Array
界面中，ctor函数和静态类函数（如
Array.isArray
）都在
ArrayConstructor
定义中

在javascript类中，构造函数只是使用
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
中，而不要作为类成员。

原因是
组件
生命周期只知道这些，并对其中的更改作出反应。

所以我会做一些类似的事情：

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

接口MyComponentProperties{
id：字符串；
名称：字符串；
}
类MyComponent扩展了React.Component{
render（）{
返回{this.props.name}；
}
}
设myComponent=
为什么您需要其中一个？为什么不使用
组件
？这两个是组件类的接口，而不是实例。在大多数情况下，您可以通过扩展
component
来创建自己的组件，但我不会创建自己的组件。我只为它创建定义。例如：声明模块“react whater”{interface reactWhaterverProps{id:number；name:string；}\n让reactWhaterver:_uReact.ComponentClass\n导出默认ReactWhater；}所以在这种情况下我不需要创建一些“state”接口，因为它不是我的组件，它的状态对我来说是黑盒，它是否正确？为什么不
React.Component
？你到底想做什么？typescript错误是不可能的，因为“组件”有两个参数。我只需要
。我为DefinitelyTyped项目中的react创建了一些定义。我举了一个例子：为什么你需要任何一个？为什么不使用
组件
？这两个是组件类的接口，而不是实例。在大多数情况下，您可以通过扩展
component
来创建自己的组件，但我不会创建自己的组件。我只为它创建定义。例如：声明模块“react whater”{interface reactWhaterverProps{id:number；name:string；}\n让reactWhaterver:_uReact.ComponentClass\n导出默认ReactWhater；}所以在这种情况下我不需要创建一些“state”接口，因为它不是我的组件，它的状态对我来说是黑盒，它是否正确？为什么不
React.Component
？你到底想做什么？typescript错误是不可能的，因为“组件”有两个参数。我只需要
。我为DefinitelyTyped项目中的react创建了一些定义。这里是我的一个例子：我想我得到了它，所以如果我想为组件创建定义，我应该把组件看作是一个函数，它将接口作为react组件的构造函数，并返回它的新实例？所以结果将是：声明模块“somereact组件”{interface S