使用具有反應打字稿，無狀態組件

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（爲國家的類型參數）默認爲{}，這意味着，無論是道具和狀態有一個空對象的類型。

所以在情況下，您所指定：

1. 你不爲S提供一個類型，所以它默認爲{}。
2. 您提供any爲S類型 - 這是不一樣{}，因爲它可以讓你的狀態設置爲所有東西（一個數字，字符串，等等）。考慮到setState API的工作方式，我不知道這是否會在實際中起作用，但如果您願意，可以嘗試。
3. 您提供{}作爲S的類型，與默認相同。

所以總之，1和3是相同的，但2不是。

Answer 2

對無狀態組件有一個特殊類型：

interface StatelessProps {} 

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