tl;dr 1) Предоставлять API инкапсулированной логики, 2) Быть «безголовым компонентом»
Изначально у нас была парадигма в React для создания пользовательского интерфейса под названием Презентационные и контейнерные компоненты — набор повторно используемыхкомпонентов пользовательского интерфейса<. /em>каждый из которых отображает детерминированную визуальную структуру на основе некоторых переданных данных, и компоненты-контейнеры, отвечающие за составление компоненты пользовательского интерфейса, получая данные с сервера или избыточности и передавая их компонентам пользовательского интерфейса. Затем у нас есть стилизованные компоненты, в которых мы используем выражения и инструменты Javascript для CSS.
Теперь я хочу написать о другой парадигме в React под названием Render Props и двух известных мне способах, которыми она может быть вам полезна.
Но быстро о реквизитах для рендеринга: 🐾
Предоставляет API и данные
Это полезно, если вы хотите инкапсулировать некоторую логику и сделать ее повторно используемой для любых дочерних компонентов — например, получение данных из API, когда событие клика инициируется внутри дочернего компонента.
Здесь мы предоставляем два метода — handleThisClick и handleFormSubmit — в компоненте-оболочке, которые позже будут использованы дочерним компонентом:
И вот как пользовательский дочерний компонент будет использовать эти два метода:
Быть безголовым компонентом
Вы когда-нибудь были в ситуации, когда у вас должна была быть библиотека компонентов, которая будет повторно использоваться в любых будущих проектах, но из-за потенциально разных требований, ожидаемых от каждого проекта, чтобы удовлетворить их, сами компоненты оказывались раздутыми рекламой? условные предложения?
Если да, то «безголовый компонент» с реквизитами рендеринга может просто помочь вам справиться с этим давлением.
Ознакомьтесь со статьей ниже, которая очень хорошо объясняет это.
По сути, «безголовый компонент» помогает разделить вашу логику и пользовательский интерфейс. Он инкапсулирует и предоставляет логику, которая будет повторно использоваться и часто использоваться другими. Важно отметить, что сам по себе, если вообще, отображает минимальный интерфейс. Скорее, он инвертирует решения пользовательского интерфейса для своих потребителей. Следовательно, разделение и избежание бесчисленных ad hoc операторов if-else в ваших компонентах 😆
Хорошо, пока!
