Quelle est la différence entre un React.FunctionComponent et un composant de fonction JS simple?

Question

Ces deux exemples accomplissent la même chose. Mais quelles sont les différences sous le capot? Je comprends les composants fonctionnels par rapport à React.Component et React.PureComponent, mais je n'ai pas pu trouver de documentation pertinente sur React.FunctionComponent .

React.FunctionComponent

 const MyComponentA: React.FunctionComponent = (props) => {
  return (
    <p>I am a React.FunctionComponent</p>
  );
};

Composant de fonction JS simple:

 const MyComponentB = (props) => {
  return (
    <p>I am a plain JS function component</p>
  );
};

Answer 1

Il n'y a aucune différence sous le capot. Le premier utilise la syntaxe TypeScript pour indiquer le type de React.FunctionComponent mais ce sont tous deux des composants de fonction JS simples.

Answer 2

il y a quelques différences mineures, le composant de fonction simple peut renvoyer une chaîne, comme:

 const FooString = () => "foo";

mais vous ne pouvez pas renvoyer de chaîne à partir d'un FunctionComponent .

 const BarString: React.FC<{}> = () => "string";

par conséquent, le type de retour doit être ReactElement|null

Answer 3

La différence est que FunctionComponent est livré avec une propriété par défaut: children

 
// Note, no children defined
type Props = {
  name: string
}

const MyComponentA: React.FunctionComponent<Props> = (props) => {
  return (
    <p>I am a React.FunctionComponent and my name is {props.name}</p>
    <p>And I have {props.children}</p>
  );
};

const MyComponentB = (props: Props) => {
  return (
    <p>I am a plain JS function component</p>
    <p>But my {props.children} are undefined</p>
  );
};

Pour MyComponentB le compilateur TS se plaindrait que children n'est pas défini.

Bien sûr, pour les deux composants, vous pouvez simplement passer des enfants et ignorer l'avertissement TS.