reactjs - care este diferența dintre ( )=>React.FC și ( )=>JSX.Element

În React, se pare că pot declara un component funcțional sau doar o funcție care returnează un element JSX. Ceea ce mă confundă este că nu știu diferența cheie dintre aceste două abordări. Există ceva ce poate face doar o abordare și cealaltă nu poate?

import React from "react";

type ItemProps = {
    id: number
    name: string
}

const Item: React.FC<ItemProps> = ({ id, name }) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

const item = ({ id, name }: ItemProps) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

export const Container = () =>
    (
        <section>
            {item({ id: 1, name: "item-1" })}
            <Item id={1} name={"item-1"} />
        </section>
    )

Răspuns #1

Rezumând diferențele:

React.FC:

• are o proprietate implicită children, ceea ce înseamnă că, chiar dacă componenta ta nu permite copii, TypeScript nu s-ar plânge dacă folosești React.FC și părintele transmite un children. Acest lucru nu afectează nimic la rulare, dar este mai bine să fii mai explicit cu privire la proprietatea children. Aceasta ar putea să dispară în următoarea versiune a React.FC, chiar acum poți folosi React.VFC
• nu funcționează bine cu defaultProps
• nu permite generice
• nu poate fi folosit pentru a comenta o declarație de funcție, doar expresiile de funcție
• face ca tiparul „component ca un namespace” să fie dificil de scris

JSX.element + interfața de proprietăți

• nu are o proprietate implicită children, așa că trebuie să o declari explicit, ceea ce este bine, și unii oameni preferă oricum tipul de returnare implicit. Aceasta nu are suport implicit pentru alte proprietăți/statice cum ar fi propTypes, displayName etc., așa că acestea ar trebui adăugate explicit dacă sunt necesare.
• nu ține cont de proprietățile implicite, aceasta este doar o tipizare obișnuită a funcțiilor pentru argumente și tipurile de returnare
• poate fi folosit cu generice
• poate fi folosit pentru a adnota o declarație de funcție, precum și expresii

Resurse

• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/
• https://fettblog.eu/typescript-react-de-ce-nu-folosesc-react-fc/
• https://github.com/facebook/create-react-app/pull/8177

Răspunsul #2

React.FC oferă suport pentru verificarea tipurilor

De asemenea, poți scrie componente cu React.FunctionComponent (sau prescurtarea React.FC - sunt la fel):

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

Unele diferențe față de versiunea „funcției normale”: :

• React.FunctionComponent este explicit în ceea ce privește tipul de retur, în timp ce versiunea normală a funcției este implicită (sau altfel necesită o adnotare suplimentară).

• Oferă verificare de tip și completare automată pentru proprietăți statice precum displayName, propTypes și defaultProps.

  • Rețineți că există unele probleme cunoscute la utilizarea defaultProps cu
    React.FunctionComponent. Consultați această problemă pentru detalii. Menținem o
    secțiune separată defaultProps pe care o puteți consulta de asemenea.
• Oferă o definiție implicită a copiilor

Consultați documentația pentru mai multe informații

https://github.com/typescript-cheatsheets/react/blob/main/README.md#section-2-getting-started