Создание многоразовых компонентов React

Создание многоразовых компонентов React

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

Настройка проекта

Во-первых, я создам новый проект React с помощью команды create-react-app:

Создание простого, многоразового компонента React

После создания проекта перейдите в файл App.js и измените существующий код на этот фрагмент:

Здесь есть элемент div, внутри которого есть текст. Если я хочу скопировать его, мне придется снова написать тот же элемент div. Вместо этого мы можем извлечь элемент div внутри переменной и записать этот элемент непосредственно в JSX моего приложения.

Если запустить команду запуска yarn start, вы увидите, что приложение отображает текст одинаково в обоих случаях. Что делать, если я хочу сделать какой-то другой текст? Или если я хочу сделать два разных текста? Для этого я сделаю некоторые изменения в переменной helloWorld.

Во-первых, я переименовал переменную в message. Затем я передаю props в качестве аргумента этой переменной. Обратите внимание, что для этого я использую стрелочную функцию ES6.

props — это объект, в котором есть свойство msg . Внутри компонента App я заменяю {helloWorld} на {message}. Внутри этой переменной message я определяю msg prop с текстом.

Теперь я создал простой, повторно используемый компонент React. Я взял JSX, завернул его внутрь функции и сделал вызов функции для отображения текста.

Но вызовы функций действительно не составлены, как JSX. Было бы лучше включить эти вызовы функций в JSX. Итак, давайте начнем с React.createElement и посмотрим, как мы можем конвертировать в JSX. Чем хорош React.createElement — это возможностью взять строку и функцию, чтобы указать, какой элемент мы хотим отобразить.

Он передаст props функции, и эта функция предположительно будет еще несколько элементов. Здесь функция message выполняет рендеринг div. Но это выглядит слишком сложно. Давайте упростим:

Здесь я меняю функцию message на Message, меняя функцию на компонент. Поступая таким образом, я могу использовать его как самозакрывающийся элемент внутри компонента App как показано в приведенном выше фрагменте кода.

Если я изменю msg prop на child prop, React по-прежнему будет делать то же самое. Я могу даже добавить один элемент Message в другой элемент Message.

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

Многоразовые компоненты — лучшие практики

Чтобы создать более эффективные пользовательские интерфейсы в React, всегда предлагается разбить общие элементы дизайна, такие как кнопки, формы и т. д. на повторно используемые компоненты с четко определенными интерфейсами.

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

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

Я создал приложение, состоящее из трех основных компонентов:

Создание многоразовых компонентов React

Компонент Code здесь содержит основные функции приложения. Он не будет использоваться ни в одном другом приложении. С другой стороны, Header и Footer могут использоваться в других приложениях.

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

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

№1. Используйте сильные элементы обертки

React render требует, чтобы вы обернули все элементы внутри него в основной родительский элемент. Вопрос в том, какой элемент я должен использовать? Должен ли я использовать <p>, <div> или что-то еще?

Независимо от того, какой элемент вы решите использовать в качестве обертки, убедитесь, что он сильный. Например, <p> может быть определен как слабый элемент, поскольку вы вызовете ошибку, если вы попытаетесь поместить в него тег <div>.

Тег <div> с другой стороны, не вызывает никакой ошибки. Вы можете разместить столько элементов, сколько хотите внутри, и они могут быть любого рода.

Если вы используете React 16, вы можете использовать React.Fragment в качестве обертки!

№2. Объявите PropTypes

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

PropTypes особенно полезны для разъяснения API-интерфейса компонента. Они будут определять типы данных вашего props и обязательно ли это приложение или нет.

Когда пользователь вводит неверный тип данных или если отсутствует propTypes, React генерирует предупреждение, информирующее, что вам нужно делать. Это поможет ускорить разработку и избежать длительных сеансов отладки.

Вы даже можете указать ожидаемую форму любых объектов, которые вы проходите через props.

Если у вас нет привычки определять PropTypes, вы можете применить это, используя linting.

№ 3. Избегайте жесткого кодирования …

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

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

Почему идентификаторы HTML должны быть уникальными? Потому как:

Идентификаторы HTML могут конфликтовать с другими вещами на странице, где ваше приложение использует повторно используемый компонент.

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

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

№4. Объявите логические значения по умолчанию

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

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

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

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

Здесь у меня есть класс с именем Counter. Я указываю, что класс Counter имеет prop с именем initialCount, значение которого по умолчанию равно 0. Это значение по умолчанию используется приложением, когда ему не предоставляется другое значение. Это объявляется ниже класса Counter.

Вы также можете объявить defaultProps внутри класса, используя static следующим образом:

Если вы пишете функциональный компонент без состояния, а не класс, вы можете объявить defaultProps, используя параметры по умолчанию.

Здесь я разрушаю props и объявляю initialCount равным 0, если значение не передается в props.

№5. Сделайте свое приложение доступным

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

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

React идет с элементами, такими как text и button. Используйте их вместо div и span где это возможно. Элементы, такие как text и button имеют правильное поведение, встроенное для обработки событий, фокуса и ввода с клавиатуры.

Кроме того, изучите доступные атрибуты расширенного интернет-приложения (ARIA) и роли, чтобы повысить доступность вашего компонента. ARIA определяет способ сделать веб-контент и веб-приложения более доступными.

№6. Рассмотрите объекты конфигурации

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

Здесь у меня есть имя компонента Rajat, у которого есть множество props внутри. Сейчас у него несколько реквизитов, но в будущем количество реквизитов может увеличиться. В таких случаях вы можете заставить ваш компонент принять объект вместо длинного списка отдельных props.

Таким образом, API-интерфейс компонента не будет меняться со временем, даже если вы добавите к нему новые свойства.

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

№7. Используйте SSR (Server-Side Rendering)

Если вы собираетесь создавать повторно используемые компоненты, важно решить, хотите ли вы поддерживать SSR с вашими компонентами. Вот несколько причин, по которым SSR может быть полезным для ваших повторно используемых компонентов:

Лучшая поисковая оптимизация (SEO) — Google поддерживает парсинг JavaScript. Но есть и другие поисковые системы, которые этого не делают. Кроме того, поисковые системы не полностью опережают то, что происходит с SEO клиентского компонента. Итак, лучше всего оставаться на более безопасной стороне вещей и использовать SSR.

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

Есть несколько вещей, которые вам нужно иметь в виду при рендеринге вашего компонента на стороне сервера:

Не думайте, что ваш компонент находится в браузере.

Избегайте вызовов document и window.

Избегайте использования setTimeout.

№8. Единый принцип ответственности

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

№9. Библиотеки компонентов и Bit

Shopify, Airbnb, Pinterest и Uber используют систему компонентного проектирования для повышения повторного использования интерфейса, ускорения разработки и согласованности всей организации. Большинство из них используют библиотеку компонентов пользовательского интерфейса (примеры).

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

Создание многоразовых компонентов React

Bit — платформа с открытым исходным кодом для создания приложений с использованием компонентов.

Для компонентов React она может увеличивать скорость dev-velocity и повторное использование компонентов. Вы можете использовать Bit как автономную систему компонентов или объединить ее с библиотекой компонентов вашей команды, чтобы каждый доступный компонент мог обнаружить, использовать, разработать синхронизацию из любого проекта.

С Bit вы можете легко изолировать и обмениваться (без какого-либо рефакторинга) компонентами из вашей библиотеки или разных проектов, визуально обнаруживать, устанавливать их с помощью NPM, импортировать и разрабатывать их из любых репозиториев и даже синхронизировать (обновлять, объединять) изменения между вашими проектами.

Создание многоразовых компонентов React

Заключение

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

Затем мы рассмотрели некоторые из лучших практик, которые помогли мне создать более эффективные компоненты для повторного использования в React. Эти методы:

Избегайте слабых элементов обертки.

Укажите PropTypes и их значения по умолчанию.

Избегайте жестких кодировок HTML-идентификаторов.

Объявите логические значения по умолчанию.

Используйте объекты Config, когда ваши компоненты имеют длинный список props.

Используйте визуализацию на стороне сервера.

Сделайте ваши компоненты более доступными.

Убедитесь, что ваш компонент несет отдельную ответственность.

Совместное использование компонентов через библиотеку компонентов и / или Bit.

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

Автор: Rajat S

Источник: https://blog.bitsrc.io/

Редакция: Команда webformyself.

Курс по React JS Material UI

Прямо сейчас посмотрите курс по React JS Material UI

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree