Компонент против элемента в ReactJS  — секрет оптимизации производительности за счет повторного использования элементов

Разница между компонентом и элементом в ReactJS

• Компонент React (компонент класса или компонент функции) — это, по сути, функция, которая принимает некоторые входные параметры и возвращает элемент React.
• элемент в React — это выходные данные, возвращаемые компонентом. Мы можем создать несколько элементов одного и того же компонента, каждый из которых будет иметь разные свойства.

Проще говоря, компонент — это фабрика по созданию элементов.

// 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 isEqual = <AnimalInfo name='puppy'/> === <AnimalInfo name='puppy'/>

Несмотря на одинаковые реквизиты, каждый элемент в приведенном выше коде является отдельным экземпляром компонента AnimalInfo.

Упрощенная версия:

const createAnimal = name => {
  return { name }
}

const animal_1 = createAnimal('foo')
const animal_2 = createAnimal('foo')

// false
const isEqual = animal_1 === animal_2

Повторное использование элемента для оптимизации приложения React

Если мы сможем идентифицировать несколько одинаковых элементов, мы сможем выделить их в один элемент и повторно использовать в приложении.

НЕ ОПТИМИЗИРОВАНО ❌

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}
    </>
  )
}