reactjs - Utilizarea TypeScript cu React, componentă fără stare

Mă întrebam care este diferența dintre acestea, presupunând că nu folosesc starea:

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

Sau se comportă toți în același mod?

Răspuns #1

Să aruncăm o privire asupra definițiilor de tip și să aflăm:

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

Atât P (parametrul de tip pentru props), cât și S (parametrul de tip pentru stare) au valoarea implicită {}, ceea ce înseamnă că atât props, cât și starea au tipul unui obiect gol.

Deci, în cazurile pe care le-ați specificat:

  1. Nu furnizezi un tip pentru S, așa că se folosește implicit {}.
  2. Furnizezi any ca tip pentru S - acest lucru nu este același cu {}, deoarece îți permite să setezi starea la absolut orice (un număr, un șir de caractere etc.). Nu am nicio idee dacă va funcționa efectiv în practică, având în vedere modul în care funcționează API-ul setState, dar poți încerca dacă vrei.
  3. Furnizați {} ca tip pentru S, ceea ce este același cu valoarea implicită.

Deci, pe scurt, 1 și 3 sunt la fel, dar 2 nu este.

Răspunsul #2

Pentru componentele fără stare există un tip special:

interface StatelessProps {}

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