HOC как опора в React

Всего несколько дней назад я подумал, а что, если бы мы могли просто передать HOC или компоненты оболочки через props.

Зрение

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

Когда я говорю о признаке, я имею в виду поведение компонента, определяемого его компонентом более высокого порядка. Представьте себе обертку дроссельной заслонки, которая регулирует фазы рендеринга своего обернутого компонента. Что-то вроде этого:

В этом фрагменте фазы рендеринга MyComponent будут регулироваться из-за его реализации HOC. Теперь давайте продолжим и переименуем компонент ThrottleWrapper в Throttled.

Хотя это стало более наглядным, мы все же можем улучшить его и вместо того, чтобы оборачивать другой тег JSX, мы можем определить что-то вроде этого:

Теперь это звучит так:

MyComponent было Throttled

Давайте проверим еще один пример. В нашем коде есть много мест, где мы удаляем ветку элементов JSX, например:

Что можно было бы записать так:

Где IF - функция каррирования, возвращающая HOC, которая отображает своего дочернего элемента, в то время как condition истинно.

На следующем этапе мы можем смешать HOC вместе:

Эта концепция неприменима для компонентов оболочки, которые принимают более одного дочернего элемента.

Контрольные точки

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

Выполнение

У нас есть два варианта сделать это:

Путем изменения определения функции React.creatElement.
Разработав плагин Babel для интерпретации синтаксиса JSX определенным образом.

Хотя первый подход очень плохо влияет на производительность, мы будем использовать его, чтобы исследовать, как эта функция повлияет на темпы разработки. Затем, если мы сочтем это полезным, мы можем разработать плагин Babel, который может не повлиять на производительность во время выполнения.

Запачкать руки

Прежде всего, нам нужно каким-то образом уникальное имя свойства, чтобы различать его при создании реагирующих элементов. Мы также можем использовать $, чтобы сделать его более конкретным. Я бы назвал его $hoc.
Затем нам нужно изменить определение функции React.createElement следующим образом:

Как видите, мы не сделали ничего особенного, просто искали свойство с именем $hoc и рекурсивно переносили текущий элемент в его HOC-компоненты.

Вот и все, руки вымойте 😎.

Образцы

Вот простой: https://codesandbox.io/s/hocasprop-c97kh

Будут обновлены дополнительные образцы.

Дорожная карта

Поскольку это концепция, нам нужно знать, что вы думаете об этом шаблоне. Попробуйте, опубликуйте свою Песочницу кода и сообщите об этом другим разработчикам React.
Поделитесь своим опытом с #hoc_as_a_prop, чтобы узнать, как это поможет в разработке.

HOC как опора в React