Что такое «компонент инжектора»?
Компонент инжектора принимает реквизиты, необязательно вычисляет новые, а затем внедряет их в свой дочерний элемент через React.cloneElement(). Важно отметить, что он также не добавляет никаких новых компонентов в DOM. Он существует только в виртуальной DOM React.
Когда можно использовать компоненты инжектора?
В структуре прототипирования, созвездии, мы используем МНОГО компонентов инжектора, чтобы абстрагироваться от логики и красиво отделить такие проблемы, как стиль, анимация и взаимодействие, от наших компонентов макета. React Native также использовал этот шаблон в TouchableWithoutFeedback.
Вот пример рендера с использованием некоторых компонентов инжектора:
Но вот в чем дело: знаете ли вы, какие из этих компонентов являются форсунками? Сколько элементов фактически добавлено в DOM?
Знакомство с <Injector_ > Соглашением об именах
В constelation мы решили обозначать компоненты инжектора постфиксом _. Думайте о постфиксе _ как о пустом месте, которое должен заполнить ребенок. Кроме того, имя хорошо цепляется. Ниже может быть написано, как: «равномерное, анимированное, стилизованное представление с дочерним текстом».
Обратите внимание, насколько проще идентифицировать форсунки? Кроме того, теперь мы можем легко увидеть, что в DOM добавлены два элемента (два не имеют постфикса _).
Становится лучше
Вы можете заметить ошибки в этом рендере?
Да! Компоненты инжектора никогда не должны закрываться автоматически, и они не должны оборачиваться несколькими дочерними элементами. Мы можем исправить это во время кода и не ждать ошибок во время выполнения.
Это соглашение об именах помогает разработчикам понять контракт компонента и, безусловно, помогло мне лучше понять, чем TouchableWithoutFeedback и TouchableOpacity различаются.
Еще лучше с инструментами
Соглашения об именах позволяют использовать инструменты. Я отредактировал свою цветовую схему vim, чтобы раскрашивать компоненты инжектора по мере раскрашивания реквизита, что еще больше усиливает концепцию и позволяет мне легко просматривать рендеры и идентифицировать их.
В будущем мы могли бы также создать правила lint для выявления ошибок во время кода, используя это соглашение.
больше соглашений об именах = ›больше полезных инструментов
Другие соглашения об именах
Изначально опубликовано в React-playbook
