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

RedDeveloper
02.05.2023 14:03
Компонент против элемента в 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}
    </>
  )
}
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.