Функциональные компоненты React: константа против функции

Недавно я оптимизировал производительность нашего приложения, и поэтому я вникал в мельчайшие детали Javascript. Одна из вещей, о которых я подумал, это есть ли какая-то реальная разница между объявлением такого компонента:

const MyComponent = () => {
    return(
      ..
    )
}

vs.

function MyComponent() {
    return(
      ..
    )
}

В этой форме синтаксис функции немного короче.

А потом?
Иногда мы можем написать стрелочную функцию следующим образом:

const MyComponent = () => (...)

Если мы поместим обычную круглую скобку после стрелки, нам не нужно писать возврат. Так что короче, если мы сможем вернуться немедленно.

А потом?

Еще одна вещь, о которой я слышал, — это «экспорт» компонента.

export default function MyComponent() {}

vs.

const MyComponent = () => {}
export default MyComponent

Синтаксис функции дает нам возможность экспортировать компонент по умолчанию на место.

А потом? (любой чувак, где здесь мои фанаты автомобилей?)

Подъем

Оказывается, самая большая причина (как я мог найти) связана с подъемом. Давайте посмотрим на пример с допустимым синтаксисом:

// I like to write my components before I use them
const MyComponent = () => {}
const AlsoMyComponent = () => {}
const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)

oo А потом?
Давайте рассмотрим неправильный синтаксис:

const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom
const MyComponent = () => {}
const AlsoMyComponent = () => {}

Этот пример 👆 заставит ваш линтер выдать предупреждение/ошибку. Потому что компоненты используются до их объявления.

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

const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom
function MyComponent() {}
function AlsoMyComponent() {}

Этот пример 👆 не задействует ваш линтер, потому что когда мы запускаем файл, он будет выглядеть так для движка JavaScript:

// Components are hoisted to the top.
function MyComponent() {}
function AlsoMyComponent() {}
const App = () => (
    <>
      <MyComponent />
      <AlsoMyComponent />
    </>
)
// I like to keep my components at the bottom
👀 where did they go?

А потом?

Вот и все! Я думаю…? Если у вас есть другая идея, чем у меня, или вы знаете больше различий, пожалуйста, дайте мне знать!