Проще говоря, компонент - это фабрика для создания элементов.
// AnimalInfo is a component const AnimalInfo = ({name}) => <p>{name}</p> // PuppyInfo and KittyInfo are elements const PuppyInfo = <AnimalInfo name='puppy' /> const KittyInfo = <AnimalInfo name='kitty' />
Для сравнения:
// true const isEqual = AnimalInfo === AnimalInfo // false const isDiff = <AnimalInfo name='puppy'/> === <AnimalInfo name='puppy'/>
Несмотря на одинаковые реквизиты, каждый элемент в приведенном выше коде является отдельным экземпляром компонента AnimalInfo.
Упрощенная версия:
const createAnimal = name => { return { name } } const animal_1 = createAnimal('foo') const animal_2 = createAnimal('foo') // false const isDiff = animal_1 === animal_2
Если мы можем определить несколько одинаковых элементов, мы можем извлечь их в один элемент и повторно использовать его во всем приложении.
НЕ ОПТИМИЗИРОВАНО ❌
const list = [0, 1, 2, ..., 100] // 100 items // in this loop, we create 100 elements with the same props const PuppyList = () => { return list.map(item => ( <> <AnimalInfo name='puppy' /> </> ) } const AnimalInfo = ({name}) => <p>{name}</p>
ОПТИМИЗИРОВАН ✅ извлечь один элемент и использовать его повторно
// we only initiate 1 element and reuse it in the entire loop const PuppyList = () => { const Puppy = <AnimalInfo name='puppy' /> return list.map(item => ( <> {Puppy} </> ) }
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.