javascript - În React, care este diferența între utilizarea unui component funcțional și doar o funcție care returnează un nod React?

Mă întreb doar dacă aceste două moduri de procesare a codului funcționează la fel.

Pentru mine pare mai ușor să creez pur și simplu o funcție obișnuită, care returnează React node. Poate să returneze de asemenea Array de React nodes, care poate fi construit ușor în timpul apelului funcției.

Există un motiv să alegi unul în locul altuia? Se pare că hook-urile pot fi folosite și în ambele...

export function Sandbox () {

    return <>
        <FunctionComponent animalName={'dog'} />
        {renderFunction('dog')}
    </>;
};

function FunctionComponent (props:{animalName:string}) {

    return <div>
        {props.animalName}
    </div>

}

function renderFunction (animalName:string) {

    return <div>
        {animalName}
    </div>

}

Mulțumesc pentru sfaturi :)

Răspuns #1

În esență, un component funcțional este deja doar o funcție care returnează un ReactNode. Observați că tipul de returnare ReactNode permite de fapt deja atât array-uri, cât și string, etc.

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Principalul avantaj al scrierii acestuia ca un component funcțional este posibilitatea de a apela funcția folosind sintaxa JSX. De asemenea, puteți folosi JSX imbricat pentru a seta automat proprietatea children pe funcția dvs.

Nu trebuie să folosești JSX. În exemplul tău ar fi în regulă să apelezi FunctionComponent({animalName: 'dog'}) (notă: nu poți face asta cu componente de tip clasă). În acest caz, diferența principală între acesta și renderFunction('dog') este că unul pune toate argumentele într-un singur obiect props, iar celălalt nu.