Question

我想知道这些之间的区别是什么，假设我没有使用状态：

1. export class SkillList extends React.Component<SkillListProps> {}
2. export class SkillList extends React.Component<SkillListProps, any> {}
3. export class SkillList extends React.Component<SkillListProps, {}> {}

或者他们都以同样的方式行事？

Answer 1

让我们看看the type definitions并找出：

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
class Component<P, S> {
    /* ... */
}

P（道具的类型参数）和S（状态的类型参数）默认为{}，这意味着道具和州都具有一个空的对象。

因此，在您指定的情况下：

您没有为S提供类型，因此默认为{}。
您提供any作为S的类型 - 这与{}相同，因为它允许您将状态设置为全部（数字，字符串等）。考虑到setState API的工作方式，我不知道这实际上是否会在实践中发挥作用，但如果您愿意，可以尝试。
您提供{}作为S的类型，与默认值相同。

简而言之，1和3是相同的，但2不是。

Answer 2

对于无状态组件，有一种特殊类型：

interface StatelessProps {}

const stateless: React.SFC<StatelessProps> = (props) => {
    return <div />
}

使用带有反应，无状态组件的打字稿

2 个答案: