javascript - React-ში რა განსხვავებაა ფუნქციური კომპონენტის გამოყენებასა და უბრალოდ ფუნქციის გამოყენებას შორის, რომელიც აბრუნებს React ნოდს?

მაინტერესებს, მუშაობს თუ არა კოდის ამ ორი დამუშავების მეთოდი ერთნაირად.

ჩემთვის უფრო მარტივად ჩანს უბრალოდ ჩვეულებრივი ფუნქციის შექმნა, რომელიც აბრუნებს React node-ს. ის ასევე შეიძლება აბრუნებდეს Array-ს React nodes-ისგან, რომელიც ფუნქციის გამოძახების დროს მარტივად შექმნილია.

არის რაიმე მიზეზი ერთს მეორის ნაცვლად არჩევისთვის? გგონია, რომ hooks-ს ორივეში შეიძლება გამოყენება...

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>

}

გმადლობთ რჩევებისთვის :)

პასუხი #1

სავსებით ბუნებრივია, ფუნქციური კომპონენტი უკვე არის უბრალოდ ფუნქცია, რომელიც აბრუნებს ReactNode. გაითვალისწინეთ, რომ დაბრუნების ტიპი ReactNode რეალურად უკვე საშუალებას აძლევს მას მასივებიც, ასევე string და სხვა ტიპებიც.

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

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

ამ მისიას როგორც ფუნქციური კომპონენტის წერასთან დაკავშირებული მთავარი უპირატესობაა ფუნქციის გამოძახების შესაძლებლობა JSX სინტაქსის გამოყენებით. თქვენ ასევე შეგიძლიათ გამოიყენოთ ნესტირებული JSX იმისთვის, რომ ავტომატურად დააყენოთ children პროპი თქვენს ფუნქციაზე.

თქვენ არ გჭირდებათ JSX-ის გამოყენება. თქვენი მაგალითის შემთხვევაში შეგიძლიათ გამოიყენოთ FunctionComponent({animalName: 'dog'}) (შენიშვნა: კლას კომპონენტებთან ეს ვერ იმუშავებს). ამ შემთხვევაში მთავარი განსხვავება მასსა და renderFunction('dog')-ს შორის ის არის, რომ ერთს ყველა არგუმენტი ერთ props ობიექტში აქვს მოთავსებული, ხოლო მეორეს არა.