React - довольно мощная библиотека для создания компонентов и их компоновки для простого, эффективного и элегантного построения приложения. Таким образом, компоненты являются фундаментальной частью React, но что именно представляет собой компонент React?
Простой компонент React представляет собой композицию виртуальных элементов DOM.
У него есть некоторые методы внутреннего жизненного цикла, которые состоят из прикрепленных к нему событий, где он запускает ваш JS-код, и может содержать CSS. Затем компонент объединяет все эти вещи и отображает вашу функцию в HTML-страницу.
Но мне было любопытно, поэтому я также поискал словарное определение «компонент»:
«Компонент - это часть, которая объединяется с другими частями, образуя нечто большее»
Чтобы объяснить это дальше, давайте на время отойдем от веб-разработки и посмотрим, как компоненты используются в автомобильной промышленности. Автомобиль - это составная часть, состоящая из множества компонентов. Некоторые из них используются только один раз (например, двигатель), а некоторые - несколько раз (например, подвески или шины). Некоторые из них используются чаще других, например ролики, шестерни и винты. Давайте подробнее рассмотрим, что такое винт.
Этот компонент соединяет вместе несколько частей / интерфейсов. Он бывает разных форм и размеров, но семантически все они делают одно и то же, поэтому можно подумать, что повторное использование винта - это неплохо, потому что:
- Имеет простую структуру
- Он делает только одно
- Он связан с четко определенными частями / интерфейсами
- Это широко используется
- Это надежно
Имея это в виду, давайте вернемся к веб-разработке.
Я хотел бы поговорить о компоненте Меню. Есть разные виды компонентов меню, такие как навигация, выпадающее, всплывающее, сворачиваемое и так далее.
В: Что должен делать компонент меню?
О: В нем должны быть перечислены пункты меню.
Вот и все! Просто и понятно. Как вы могли заметить, я не упоминал, что делает пункт меню, поскольку их поведение может меняться в зависимости от различных типов меню.
Один элемент HTML имеет семантическое сходство с меню, это элемент ul (неупорядоченный список). Приведенный ниже код можно представить себе как меню, которое показывает три пункта меню, которые ничего не делают, кроме отображения текста. Затем контекст меню четко разделен на две части: контейнер и элементы.
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
Теперь давайте создадим базовый компонент меню. Для этого я буду использовать мою любимую библиотеку CSS-in-JS styled-components:
Итак, у нас есть контейнер под названием MenuBaseContainer, созданный с помощью styled-components путем расширения его из ul (styled.ul). Элементы меню li передаются в компонент через свойство items (не рекомендуется назначать индексный номер ключу, но у нас нет ничего другого сейчас).
Я добавил свойство direction для отображения меню в горизонтальном или вертикальном направлении, поскольку это одна из основных характеристик меню (помимо его основных функций). Итак, теперь вы можете использовать этот компонент, как показано ниже:
<MenuBase direction="vertical" items={ [1, 2, 3, 5, 8, 13] } />
Это все еще не то меню, которое вам нужно, но оно будет служить базовым компонентом меню. Давайте продолжим.
Теперь я хотел бы создать компонент SideMenu, который можно выровнять по его контейнеру или экрану.
Это выглядит немного длинным, потому что я храню весь код в одном файле для демонстрационных целей. Вы можете извлечь некоторые части этого компонента в другие файлы и импортировать их для лучшей читаемости и возможности повторного использования.
Здесь SideMenuBaseContainer расширяет MenuBaseContainer, чтобы быть уверенным, что свойство direction можно использовать в этом компоненте. Таким образом, мы унаследовали контейнер меню и добавили новые функции с помощью свойства align, обратите внимание, как свойство direction передается в соответствии с параметром align. Давайте воспользуемся этим:
<SideMenuBase items={ [1, 2, 3, 5, 8, 13] } />
Это должно быть отображено, как показано ниже. Его свойство align оставлено по умолчанию, и вы можете увидеть, как элементы меню имеют предопределенный стиль из SideMenuBaseContainer.
С React вы можете использовать любой компонент, переданный в массив элементов (см. Снимок экрана ниже), или вы можете передать компонент как опору. Это одна из самых мощных функций библиотеки React, поскольку она позволяет нам создавать композицию из компонентов. Подробнее об этом можно прочитать здесь https://reactjs.org/docs/composition-vs-inheritance.html
Вы даже можете поместить SideMenu в контейнер, и оно будет автоматически выровнено.
С помощью этой статьи и примеров я хотел продемонстрировать основы повторного использования компонентов при работе с React и styled-components. Перед тем, как погрузиться в разработку, вам следует:
- Подумайте о контексте и использовании вашего компонента
- Решите, подходит ли он для повторного использования
- Если да, то как создать его как общий компонент и расширить его.
Вы можете клонировать мой репозиторий, показанный ниже, и запустить сборник рассказов, чтобы просмотреть и поиграть с компонентами.
Спасибо моему коллеге Rosario Argüello за рецензию на статью.
И спасибо, что прочитали. Хорошего дня.
