В React, в чем разница между использованием функционального компонента и просто функцией, которая возвращает узел React?

ProgramBox

В React, в чем разница между использованием функционального компонента и просто функцией, которая возвращает узел React?

Post author:admin
Запись опубликована:27 февраля, 2023
Post category:Вопросы по программированию

#javascript #reactjs #typescript #function #components

#javascript #reactjs #typescript #функция #Компоненты

Вопрос:

Мне просто интересно, работают ли эти два способа обработки кода одинаково.

Для меня кажется проще просто создать обычную функцию, которая возвращает React node . Он также может возвращать Array of React nodes , который можно легко создать во время вызова функции.

Есть ли причина выбирать один над другим? Похоже, что хуки можно использовать и в обоих случаях…

 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. для начала, скорее всего, следует выбрать компонент вместо функции, чтобы упорядочить их код. Также, если вам нужно, чтобы функция содержала свое собственное состояние, например, модальное и т. Д., То Это является основным преимуществом использования компонента вместо обычной функции. Я считаю, что масштабируемость — это еще одна причина, по которой я бы отдал на аутсорсинг компонент, а не функцию. Я чувствую, что наличие множества различных функций внутри страницы будет довольно запутанным и будет сложно поддерживать через некоторое время

2. также перехваты нельзя вызывать внутри вложенной функции, которая нарушает правила перехватов

3. Ну, не обязательно должна быть куча функций (они могут ветвиться мелко), эти функции также могут быть названы с заглавной буквы в качестве первых, возможно, даже IDE может пометить эти функции, возвращающие узлы, специально другим цветом, в этом может не быть необходимости. Я понимаю некоторые чувства, хотя и надеюсь на технически проверяемое доказательство. Но все же спасибо за ответ. O:-)

4. Мне интересно, не компилирует ли React их одинаково в конце.

5. Хуки — это функции JavaScript, но они накладывают два дополнительных правила: вызывать хуки только на верхнем уровне. Не вызывайте перехваты внутри циклов, условий или вложенных функций. Только перехваты вызовов из компонентов функции React.

Ответ №1:

По сути, функциональный компонент уже является просто функцией, которая возвращает a 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 prop для вашей функции.

Вам не нужно использовать JSX. В вашем примере было бы неплохо вызвать FunctionComponent({animalName: 'dog'}) (примечание: вы не можете сделать это с помощью компонентов класса). В этом случае основное различие между ним и renderFunction('dog') заключается в том, что один помещает все свои аргументы в один объект props, а другой — нет.