Прекратите программировать, прежде чем думать о подвигах. Рендеринг реквизитов и составные шаблоны. Дизайн фронтенд-системы, часть — 1.
Пишите лучший код с помощью этих шаблонов
Шаблоны React Design — отличный способ структурировать и совместно использовать функциональность ваших приложений.
Рендеринг шаблонов реквизита
Шаблон рендеринга реквизитов — это метод, который позволяет компонентам совместно использовать функциональность посредством свойств, которые являются функциями. Передавая функцию в качестве свойства компоненту, вы позволяете этому компоненту отображать содержимое, предоставляемое функцией. Этот шаблон открывает целый мир возможностей для создания многократно используемых и динамических компонентов.
Вот пример
- Компонент
Counter
управляет состояниемcount
с помощью ловушкиuseState
, которая определяет функцииincrement
иdecrement
для обновления счетчика. - Компонент
Counter
принимает свойствоrender
, которое представляет собой функцию, принимающуюcount
,increment
иdecrement
в качестве аргументов. Затем мы вызываем функциюrender
и передаем значенияcount
,increment
иdecrement
. - Родительский компонент
App
отображает компонентCounter
и предоставляет функцию рендеринга в качестве реквизитаrender
. - Функция рендеринга в родительском компоненте использует предоставленный счетчик и функции для отображения текущего счетчика и кнопки для увеличения и уменьшения.
Этот простой пример демонстрирует, как шаблон Render Props позволяет инкапсулировать функциональность внутри компонента и делегировать управление рендерингом и поведением родительскому компоненту.
Но Маниш, чем это полезно??
Давайте рассмотрим сценарий, в котором вам нужно создать два отдельных компонента, которые отображают счетчик с помощью кнопок увеличения и уменьшения. Вместо дублирования логики подсчета и кода рендеринга в обоих компонентах вы можете использовать шаблон Render Props, чтобы инкапсулировать логику подсчета в одном компоненте Counter
и разделить ее между двумя компонентами.
Здесь вы можете видеть, что оба компонента могут иметь совершенно разные пользовательский интерфейс и другие вещи, но поскольку компонент счетчика обрабатывает логическую часть, мы можем использовать шаблон рендеринга для разделения логики и возможности повторного использования между различными компонентами.
Реагировать на сложные шаблоны
React Compound Pattern — это подход к проектированию, который включает в себя объединение компонентов для создания единого интерфейса с общим поведением и состоянием, при этом позволяя каждому отдельному компоненту оставаться относительно простым и ориентированным на определенный аспект пользовательского интерфейса.
Когда использовать составные шаблоны??
- Сложные элементы пользовательского интерфейса.Составные компоненты особенно ценны для создания сложных элементов пользовательского интерфейса, требующих координации между несколькими компонентами. Примеры включают вкладки, аккордеоны, модальные окна, ползунки и многое другое.
- Общее состояние и поведение. Когда вам необходимо совместно использовать состояние или поведение для набора компонентов, составной шаблон предоставляет структурированный способ управления этой общей функциональностью.
Простыми примерами являются HTML-элементы select и options. HTML-элементы select и options работают в группах для обеспечения заданной функциональности.
Это пример переключателя тем, основанного на составном шаблоне.
- Компонент меню выбора инкапсулирует логику для отрисовки меню выбора и обработки изменений выбора.
- Компонент App отображает компонент Выбрать меню и предоставляет доступные параметры, а также функцию обратного вызова ( обработать изменение ) для обработки выбранного параметра.
Заключение
Всегда использовать эти шаблоны — несложное правило. Не стесняйтесь писать код так, как вам нравится, но их использование наверняка даст вам преимущество в качестве кода, возможности повторного использования, настройке и многом другом.
Далее
Шаблон HOC, шаблон крючков и многое другое.