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

В первой части мы изучили основы React, основы функции и что такое компонент.

В этой части давайте узнаем, что такое подкомпоненты и как мы можем использовать их для написания более чистого кода.

Сценарий

Рассмотрим сценарий, в котором владелец магазина хочет иметь другой счетчик для подсчета различных фруктов, которые покупатель кладет в корзину!

На данный момент они продают только два фрукта — яблоко и манго.

Давайте разработаем для него код!

Дизайн кода

Прямо сейчас наш проект имеет одно состояние и одну кнопку, при нажатии на кнопку мы обновляем значение состояния.

Поскольку в магазине всего 2 фрукта, давайте добавим еще одну кнопку и еще одно состояние счета. так что у нас есть две разные кнопки для представления двух разных фруктов.

Давайте изменим код, чтобы учесть эти изменения.

Мы добавили 3 новых изменения здесь.

  • Новое состояние (mangoCount)
  • Новая кнопка для добавления манго в корзину
  • Функция обновления количества манго

Раньше имена переменных были просто count, теперь мы обновили их как appleCount.

Запросы на улучшение

Мы доставляем это, но теперь мы узнаем, что магазин добавил еще один фрукт — Апельсин.

Чтобы приспособиться к этому, нам нужно будет добавить еще один счетчик, еще одну кнопку, еще один обработчик и еще один элемент div для отображения счетчиков.

Подумайте, какой длины может быть этот файл, если у нас есть 10 фруктов.

Ну, не беспокойтесь! Подкомпоненты в действие!

Подкомпоненты

Подкомпоненты — это обычные компоненты React, которые используются в других компонентах React.

Теперь, чтобы справиться с растущим кодом компонента приложения, давайте создадим новый компонент для подсчета фруктов и используем его в компоненте приложения.

Назовем этот компонент Fruits Counter.

Итак, теперь вся фактическая логика подсчета фруктов находится внутри компонента FruitsCounter, а компонент приложения чист.

Но код все еще находится в файле App.jsx. Давайте переместим компонент FruitsCounter в отдельный файл. Мы импортируем этот файл в компонент приложения и используем его.

Итак, FruitsCounter сам по себе является компонентом и подкомпонентом приложения

Запрос функции

Теперь владелец магазина расширился и до овощей, и нам нужно приспособиться к ним сейчас.

Мы добавили 3 состояния, 3 кнопки и 3 обработчика для обработки 3 фруктов.

Подумайте о размере кодовой базы для обработки 10 фруктов и 10 овощей! Это будет огромным!

Мы также видим, что всякий раз, когда мы хотим иметь дополнительный прилавок с фруктами, мы добавляем 4 обычных вещи.

  • Новое состояние
  • Новая кнопка
  • Новый обработчик кнопок
  • Новый Div для отображения нового количества фруктов

Единственное, что не является общим, так это название плода.

Что, если мы создадим общий компонент счетчика, который может считать что угодно, будь то фрукты или овощи, и каким-то образом использовать его для всех фруктов и овощей без повторного написания общих вещей?

Об этом будет в следующей части! Это все для этой части!

GitHub и демонстрационная ссылка

Сегодняшняя фиксация GitHub
Последняя демонстрация

Спасибо

Первоначально опубликовано на https://www.linkedin.com.