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

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

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

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

create-react-app my-app

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

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

import React, {Component} from 'react';
import './App.css'; class App extends Component { render() { return ( <div> <div>A Generic Hello World text</div> </div> ) }
} export default App; 

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

import React, {Component} from 'react';
import './App.css'; const helloWorld = <div>A Generic Hello World Text</div>; class App extends Component { render() { return {helloWorld}; }
} export default App;

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

import React, {Component} from 'react';
import './App.css'; const message = props => <div>{props.msg}</div>; class App extends Component { render() { return ( <div> {message({msg: 'A Generic Hello World Text'})} {message({msg: 'Creating Reusable React Components'})} </div> ); }
} export default App;

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

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

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

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

import React, {Component} from 'react';
import './App.css'; const message = props => <div>{props.msg}</div>; class App extends Component { render() { return ( <div> {React.createElement(message, {msg: 'A Generic Hello World Text'})} {React.createElement(message, { msg: 'Creating Reusable React Components', })} </div> ); }
} export default App;

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

import React, {Component} from 'react';
import './App.css'; const Message = props => <div>{props.msg}</div>; class App extends Component { render() { return ( <div> <Message msg="A Generic Hello World Text" /> <Message msg="Creating Reusable React Components" /> </div> ); }
} export default App;

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

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

class App extends Component { render() { return ( <Message> Hello World <Message>Reusable Components</Message> </Message> ); }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Rajat.propTypes = { movie: PropTypes.string.isRequired, pizza: PropTypes.string.isRequired,
};

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

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

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

Rajat.propTypes = { user: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number }),
}

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

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

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

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

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

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

Rajat.propTypes = { OneID: PropTypes.string.required
}

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

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

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

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

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

Counter.defaultProps = {initialCount: 0};

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

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

class Counter extends React.Component { static defaultProps = {initialCount: 0}; render() { return () }
}

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

const Counter = ({initialCount = 0}) => {} 

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

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

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

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

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

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

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

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

<Rajat first="Rajat" last="S" job="Content Writer" place="Bangalore"
/>

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

<Rajat person={{ first:"Rajat", last:"S", job:"Content Writer", place: "Bangalore" }}
/>

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Автор: Rajat S

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

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