Лучший способ определить функции внутри реагирующих функциональных компонентов?

Question

В Интернете есть много рекомендаций по определению функций в объектах React.Component, но у меня возникают проблемы с поиском рекомендаций для функций в функциональных компонентах. Например, каково значение myFC_1 против myMC_2 в приведенном ниже коде машинописи.

interface Props { name: string};

export const myFC_1: FunctionComponent<Props> = (props:Props) {
    function helloWorld(): string {
        return "Hello " + props.name;
    }
    return <div> { helloWorld() }</div>
}

export const myFC_2: FunctionComponent<Props> = (props:Props) {
    const helloWorld =():string =>  {
        return "Hello " + props.name;
    } 
    return <div> { helloWorld() }</div>
}

Answer 1

Просто будьте последовательны каждый раз, когда вы делаете это. В функциональном компоненте не имеет значения, какой подход вы используете.Жирная стрелка может быть немного медленнее из-за автоматического связывания, что бесполезно в функциональном компоненте, но я буквально угадываю без каких-либо тестов :).

Компонент класса - это совсем другое. Когда вы определяете функцию внутри рендера, используйте жирную стрелку, поэтому вам не нужно думать о привязке контекста.Поэтому главное здесь - просто договориться со своей командой о том, что вы будете использовать, а затем следовать этому правилу.

Answer 2

Нет лучшего способа, это вопрос предпочтений.

Для объявления функций может быть полезно поднять при необходимости:

export const myFC_1: FunctionComponent<Props> = (props:Props) {
    return <div> { helloWorld() }</div>

    function helloWorld() {
        return "Hello " + props.name;
    }
}

И стрелка может быть однострочной:

export const myFC_2: FunctionComponent<Props> = (props:Props) {
    const helloWorld =() => "Hello " + props.name;

    return <div> { helloWorld() }</div>
}

string тип является необязательным, поскольку он выводится.