Реакт компонент
Это независимый, переиспользуемый фрагмент кода, который отвечает за определённый участок пользовательского интерфейса (UI). Компоненты могут быть созданы как классовые, так и функциональные.
Существует два основных типа компонентов React:
- Функциональные компоненты: это простейший тип компонентов. Это чистые функции, которые принимают props (сокращение от «properties») и возвращают элементы JSX (JavaScript XML). У них нет собственного состояния и нет доступа к методам жизненного цикла.
- Компоненты класса: эти компоненты являются классами, расширяющими класс React.Component. У них есть собственное состояние и методы жизненного цикла, и они могут обрабатывать более сложную логику.
Структура компонента. Типичный компонент React состоит из:
- Операторы импорта: импорт необходимых библиотек, компонентов или модулей.
- Определение компонента: определение компонента как функции или класса.
- JSX: возврат элементов JSX, представляющих пользовательский интерфейс компонента.
- Свойства: получение свойств от родительских компонентов.
- Состояние: управление внутренним состоянием компонента (применимо только к компонентам класса).
- Методы жизненного цикла: методы, которые вызываются на разных этапах жизненного цикла компонента (применимо только к компонентам класса).
Жизненный цикл компонента. Компонент React проходит несколько этапов в течение своего жизненного цикла:
- Монтирование: когда компонент отображается в DOM.
- Обновление: когда свойства или состояние компонента изменяются.
- Демонтирование: когда компонент удаляется из DOM.
Ключевые понятия
- Свойства: сокращение от «свойства», свойства — это неизменяемые значения, передаваемые от родительского компонента дочернему компоненту.
- Состояние: внутреннее состояние компонента, которое может меняться со временем.
- Контекст: способ обмена данными между компонентами без передачи свойств вручную.
- Обработка событий: обработка взаимодействий пользователя, таких как щелчки или отправка форм.
- Ссылки: ссылки на узлы или компоненты DOM, используемые для императивных операций.
Лучшие практики
- Держите компоненты небольшими и сфокусированными: разбивайте сложные компоненты на более мелкие, пригодные для повторного использования.
- Используйте функциональные компоненты, когда это возможно: если вам не нужно управлять состоянием или использовать методы жизненного цикла, используйте функциональные компоненты.
- Используйте props для передачи данных: избегайте использования глобальных переменных или ненужного изменения состояния.
- Используйте контекст с умом: используйте контекст только при необходимости, так как это может затруднить понимание кода.
- Проверяйте свои компоненты: пишите модульные и интеграционные тесты, чтобы убедиться, что ваши компоненты работают так, как ожидается.
Общие шаблоны компонентов
- Шаблон контейнера-презентатора: разделение логики и представления на два отдельных компонента.
- Компоненты высшего порядка (HOC): Обертывание компонентов дополнительной функциональностью.
- Render Props: Передача функции рендеринга в качестве prop дочернему компоненту.
- Compound Components: Создание одного компонента, содержащего несколько связанных компонентов.
0
Использованно в
Буду занят разработкай нового проекта с кодовым названием SearchResultParser. Его суть в том, чтобы парсить данные из поисковой выдачи различных поисковых машин. Таких как google, youtube, yandex и прочих.
В этой статье ты найдёшь пример того как реализовать свой quill тултип и поймёшь как это вообще работает. Для примера взяты тултипы для ссылок
Были использованны SEO рекомендации от Google для улучшения пагинатора и бесконечной ленты с использованием изменений состояний url страницы. Так же была разработана теговая система для сайта с галереей
Это статья-вступление и статья-навигатор по проекту/веб-инструменту SearchResultParser. Чему можно будет научиться и для кого эта серия статей
Создание базового приложения на React
19.07.2024