Функциональные компоненты 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?
А потом?
Вот и все! Я думаю…? Если у вас есть другая идея, чем у меня, или вы знаете больше различий, пожалуйста, дайте мне знать!