Прекратите программировать, прежде чем думать о подвигах. Рендеринг реквизитов и составные шаблоны. Дизайн фронтенд-системы, часть — 1.

Пишите лучший код с помощью этих шаблонов

Шаблоны React Design — отличный способ структурировать и совместно использовать функциональность ваших приложений.

Рендеринг шаблонов реквизита

Шаблон рендеринга реквизитов — это метод, который позволяет компонентам совместно использовать функциональность посредством свойств, которые являются функциями. Передавая функцию в качестве свойства компоненту, вы позволяете этому компоненту отображать содержимое, предоставляемое функцией. Этот шаблон открывает целый мир возможностей для создания многократно используемых и динамических компонентов.

Вот пример

  1. Компонент Counter управляет состоянием count с помощью ловушки useState, которая определяет функции increment и decrement для обновления счетчика.
  2. Компонент Counter принимает свойство render, которое представляет собой функцию, принимающую count, increment и decrement в качестве аргументов. Затем мы вызываем функцию render и передаем значения count, increment и decrement.
  3. Родительский компонент App отображает компонент Counter и предоставляет функцию рендеринга в качестве реквизита render.
  4. Функция рендеринга в родительском компоненте использует предоставленный счетчик и функции для отображения текущего счетчика и кнопки для увеличения и уменьшения.

Этот простой пример демонстрирует, как шаблон Render Props позволяет инкапсулировать функциональность внутри компонента и делегировать управление рендерингом и поведением родительскому компоненту.

Но Маниш, чем это полезно??

Давайте рассмотрим сценарий, в котором вам нужно создать два отдельных компонента, которые отображают счетчик с помощью кнопок увеличения и уменьшения. Вместо дублирования логики подсчета и кода рендеринга в обоих компонентах вы можете использовать шаблон Render Props, чтобы инкапсулировать логику подсчета в одном компоненте Counter и разделить ее между двумя компонентами.

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

Реагировать на сложные шаблоны

React Compound Pattern — это подход к проектированию, который включает в себя объединение компонентов для создания единого интерфейса с общим поведением и состоянием, при этом позволяя каждому отдельному компоненту оставаться относительно простым и ориентированным на определенный аспект пользовательского интерфейса.

Когда использовать составные шаблоны??

  1. Сложные элементы пользовательского интерфейса.Составные компоненты особенно ценны для создания сложных элементов пользовательского интерфейса, требующих координации между несколькими компонентами. Примеры включают вкладки, аккордеоны, модальные окна, ползунки и многое другое.
  2. Общее состояние и поведение. Когда вам необходимо совместно использовать состояние или поведение для набора компонентов, составной шаблон предоставляет структурированный способ управления этой общей функциональностью.

Простыми примерами являются HTML-элементы select и options. HTML-элементы select и options работают в группах для обеспечения заданной функциональности.

Это пример переключателя тем, основанного на составном шаблоне.

  1. Компонент меню выбора инкапсулирует логику для отрисовки меню выбора и обработки изменений выбора.
  2. Компонент App отображает компонент Выбрать меню и предоставляет доступные параметры, а также функцию обратного вызова ( обработать изменение ) для обработки выбранного параметра.

Заключение

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

Далее

Шаблон HOC, шаблон крючков и многое другое.