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

Компонент против элемента в 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 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

Повторное использование элемента для оптимизации приложения 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}
    </>
  )
}