Advertisement
  1. Code
  2. React

Введение в компоненты высшего порядка в React

by
Read Time:10 minsLanguages:
This post is part of a series called A Gentle Introduction to Higher Order Components in React.
A Gentle Introduction to HOC in React: Learn by Example
A Gentle Introduction to Higher-Order Components in React

Russian (Pусский) translation by Anna k.Ivanova (you can also view the original English article)

Компоненты высшего порядка (HOC) представляют собой интересную технику в React, используемую для рефакторинга аналогичных компонентов, которые имеют почти одинаковую логику. Я знаю, что это звучит абстрактно и продвинуто. Тем не менее, это архитектурный шаблон, который не является специфичным для React, и, следовательно, вы можете использовать этот подход для разных вещей.

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

Есть несколько других учебных пособий, которые учат вас о HOC, но большинство из них предназначены для опытных разработчиков React. Когда я начал изучать React, у меня были проблемы с пониманием концепции компонентов более высокого порядка и того, как я мог бы включить HOC в свой проект для написания лучшего кода. Эта статья объяснит все, что вам нужно знать о HOC с нуля до люка.

Обзор

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

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

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

Синтаксическая таблица ES6

Уже скоро приступим к коду. Но прежде чем мы это сделаем, вот несколько вещей, о которых я думаю, вы должны знать. Я предпочитаю использовать синтаксис ES6 везде, где это возможно, и он отлично работает с HOC. Для новичка HOC имел смысл, но некоторые из синтаксиса ES6 этого не сделали. Поэтому я рекомендую пройти этот раздел один раз, и вы можете вернуться сюда позже для справки.

Стрелочные функции

Стрелочные функции являются обычными функциями, но с более коротким синтаксисом. Они лучше всего подходят для не-методных функций, и это то, что нас особенно интересует. Вот несколько примеров, с которых можно начать:

Функция без параметров

Функция с одним параметром

Функция с несколькими параметрами

Карринг в функциональном программировании

Хотя название предполагает, что оно имеет какое-то отношение к экзотическому блюду из популярной индийской кухни, это не так. Карринг помогает разбить функцию, которая принимает множество аргументов, на ряд функций, которые принимают один аргумент за раз. Вот пример:

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

Тесно связанный термин называется частичным применением. Частичное приложение имеет дело с созданием новой функции путем предварительного заполнения некоторых аргументов существующей функции. Вновь созданная функция будет иметь арность (что соответствует количеству аргументов) меньше, чем у исходной функции.

Синтаксис распространения

Операторы распространения распространяют содержимое массива, строки или выражения объекта. Вот список вещей, которые вы можете сделать с помощью операторов распространения

Синтаксис распространения в вызовах функций

Синтаксис распространения в литералах массива

Синтаксис распространения в объектных литералах

Мне лично нравится, как три точки могут упростить передачу существующих props дочерним компонентам или создание новых props.

Оператор спреда в действии

Теперь, когда мы знаем основной синтаксис ES6 для построения HOC, давайте посмотрим, что они из себя представляют.

Функции высшего порядка

Что такое функция высшего порядка? Википедия:

В математике и информатике функция более высокого порядка (также функциональная, функциональная форма или функтор) - это функция, которая либо принимает одну или несколько функций в качестве аргументов, либо возвращает функцию в качестве своего результата или обоих.

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

Давайте посмотрим глубже на это. calculator() принимает функцию в качестве входных данных и возвращает другую функцию - это идеально вписывается в наше определение функции более высокого порядка. Поскольку мы использовали синтаксис параметра rest, возвращаемая функция собирает все свои аргументы внутри массива.

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

Добавьте функцию, такую как add() или multiply() и любое количество параметров, а calculator() возьмет ее оттуда. Таким образом, calculator - это контейнер, который расширяет функциональность add() и multiply(). Это дает нам возможность решать проблемы на более высоком или более абстрактном уровне. На первый взгляд, преимущества этого подхода включают в себя:

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

Теперь, когда у нас есть хорошее представление о функциях высшего порядка, давайте посмотрим, на что способны компоненты высшего порядка.

Компоненты высшего порядка

Компонент высшего порядка - это функция, которая принимает компонент в качестве аргумента и возвращает расширенную версию этого компонента.

ExtendedComponent составляет InputComponent. ExtendedComponent похож на контейнер. Он отображает InputComponent, но поскольку мы возвращаем новый компонент, он добавляет дополнительный уровень абстракции. Вы можете использовать этот слой, чтобы добавить состояние, поведение или даже стиль. Вы даже можете вообще не отображать InputComponent, если хотите - HOC способны сделать это и даже больше.

Изображение ниже должно наглядно это продемонстрировать.

Higher Order Components Overview Higher Order Components Overview Higher Order Components Overview

Достаточно теории - давайте перейдем к коду. Вот пример очень простого HOC, который оборачивает входной компонент вокруг тега <div>. С этого момента я буду ссылаться на InputComponent как WrappedComponent, потому что это соглашение. Тем не менее, вы можете называть его как угодно.

Функция withGreyBg принимает компонент в качестве входных данных и возвращает новый компонент. Вместо того, чтобы напрямую составлять компоненты карты и прикреплять тег стиля к каждому отдельному компоненту, мы создаем HOC, который служит этой цели. Компонент высшего порядка оборачивает исходный компонент и добавляет вокруг него тег <div>. Следует отметить, что вы должны вручную передать prop здесь на двух уровнях. Мы не сделали ничего особенного, но так выглядит нормальный HOC. Изображение ниже демонстрирует пример withGreyBg() более подробно.

Higher-Order Components example in ReactHigher-Order Components example in ReactHigher-Order Components example in React

Хотя это может показаться не особенно полезным в настоящее время, преимущества не являются тривиальными. Рассмотрим следующий сценарий. Вы используете маршрутизатор React, и вам нужно сохранить некоторые маршруты защищенными - если пользователь не аутентифицирован, все запросы к этим маршрутам должны быть перенаправлены в /login. Вместо дублирования кода аутентификации мы можем использовать HOC для эффективного управления защищенными маршрутами. Любопытно узнать как? Мы расскажем об этом и многом другом в следующем уроке.

Примечание. В ECMAScript предложена функция, называемая декоратором, которая упрощает использование HOC. Тем не менее, это все еще экспериментальная функция, поэтому я решил не использовать ее в этом уроке. Если вы используете create-react-app, вам сначала нужно извлечь, чтобы использовать декораторы. Если вы используете последнюю версию Babel (Babel 7), все, что вам нужно сделать, это установить babel-preset-stage-0, а затем добавить его в список плагинов в вашем webpack.config.dev.js следующим образом.

Заключение

В этом уроке мы изучили основные понятия HOC. HOCs - это популярные методы создания компонентов многократного использования. Мы начали с обсуждения базового синтаксиса ES6, чтобы вам было легче привыкнуть к стрелочным функциям и писать современный код JavaScript.

Затем мы рассмотрели функции высшего порядка и то, как они работают. Наконец, мы коснулись компонентов высшего порядка и создали HOC с нуля.

Далее мы рассмотрим различные методы HOC с практическими примерами. Оставайтесь с нами. Поделитесь своими мыслями в разделе комментариев.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.