Если вы какое-то время программировали на JavaScript, вы, вероятно, знакомы с React (или ReactJS), интерфейсной библиотекой для создания пользовательских интерфейсов. Вы, наверное, знаете, что это самый популярный интерфейсный фреймворк в мире технологий по использованию [1] благодаря его гибкости, широко распространенным вариантам использования, простоте использования и широкой поддержке.
Сегодня мы углубимся в React и рассмотрим один из его основных строительных блоков: компоненты. На примерах кода мы рассмотрим, что делают компоненты React, сравним классовые и функциональные компоненты и обсудим, какой тип следует использовать.
Что такое компонент React?
Как и все языки программирования, JavaScript поддерживает функции, позволяющие вставлять многократно используемые фрагменты бизнес-логики в более крупные фрагменты кода. Это скрывает сложность и иллюстрирует концепцию подпрограммы.
Компоненты React служат той же цели, за исключением того, что компоненты React эффективно делят пользовательский интерфейс на повторно используемые компоненты, которые возвращают HTML. В некотором смысле компоненты React — это подпрограммы для пользовательских интерфейсов.
Примечание. Компоненты React представляют собой независимые смеси кода JavaScript и фрагментов HTML, возвращающих разметку (HTML). JavaScript обеспечивает бизнес-логику и позволяет создавать правильный HTML для вставки в DOM. (CSS обеспечивает стиль.)
Мы можем проиллюстрировать это с помощью некоторого кода. Вы можете легко создать файл JS, который возвращает фрагмент HTML:
return (<p>Hello,World</p>)
Сложнее заставить файл JS возвращать HTML, определенный в другом месте. Один из способов сделать это — использовать заполнитель HTML-разметки:
return (<WelcomeMessage />)
Разметка <WelcomeMessage /> является заполнителем того, что файл JSX определяет с помощью необходимого HTML.
Определение : JSX расшифровывается как JavaScript XML и позволяет нам писать HTML в React.
Вот как это будет выглядеть:
function WelcomeMessage() {return (<p>Hello, World</p>)}export default WelcomeMessage;
Здесь мы определили функцию с именем WelcomeMessage(), которая может отображаться вместо заполнителя, определенного в основном файле JS. Вам просто нужно импортировать функцию в основной файл JS следующим образом:
import WelcomeMessage from «./WelcomeMessageComponent»;return(<WelcomeMessage />)
<p>Hello, World</p>В результате вместо заполнителя будет возвращен JS-файл <WelcomeMessage />.
В нашем примере мы создали компонент React, который будет возвращать элемент <p>Hello, World</p>. Но компоненты React не ограничиваются статическим HTML. Вы можете добавить логику JavaScript, чтобы сделать их более удобными.
Давайте сделаем этот пример немного интереснее. Мы можем заменить слово «Мир» в HTML на переменную {place}. Далее мы можем добавить логику JavaScript, чтобы присвоить значение нашей переменной на основе условия:
let place = «Unknown»;switch(SomeCondition){case condition1: place = «Ukraine»; break;case condition2: place = «Russia»; break;case condition3: place = «US»; break;default: place = «World»; break;}return (<p>Hello, {place}</p>)
Здесь React заменит {place}текст на основе условия в WelcomeMessageкомпоненте. Компонент WelcomeMessageвернет HTML-элемент с текстовым значением вместо {place}.
В этом суть компонента React : позволить бизнес-логике изменять фрагменты HTML и возвращать простой HTML для вставки в DOM.
В React есть два способа создания компонентов: классовые и функциональные компоненты. Несмотря на синтаксические различия, они оба возвращают фрагмент HTML, созданный из смеси JavaScript и HTML. Рассмотрим подробнее оба типа компонентов.
Что такое компонент класса?
Компонент класса — это класс JavaScript ECMAScript 6 (ES6), который вы определяете в коде следующим образом:
import { Component } from ‘react’;class MyComponent extends React.Component {constructor(props) {super(props);this.state = { currState: true }}render() {<div><p>Hello, World!</p></div>}}
Компоненты класса наследуются от класса React.Component. Объекты React.Component имеют состояние, что означает, что объект может содержать информацию, которая может меняться в течение времени жизни объекта. Они также могут реагировать на методы жизненного цикла, такие как ComponentDidMount(), ComponentDidUpdate()и ComponentWillUnMount().
Примечание. Методы жизненного цикла позволяют обновленной информации о состоянии инициировать повторную визуализацию, которая обновляет DOM с исправленной разметкой HTML.
Компоненты класса также могут иметь переданные им свойства (также известные как реквизиты ). Реквизиты передаются конструктору в качестве аргументов и должны быть переданы в класс родительского компонента путем вызова super(props). Реквизит доступен в течение всего срока службы объекта.
Этот render()метод требуется в компонентах класса и используется для возврата элемента HTML.
Что такое функциональный компонент?
Функциональные компоненты — это функции JavaScript. Есть два способа их создания. Первый — с помощью functionключевого слова:
function MyComponent(props) {return (<div><p>Hello, World</p><p>Have a nice day!</p></div>);}
Вы также можете использовать синтаксис стрелочной функции для создания функциональных компонентов:
const MyComponent = (props) => {return (<React.Fragment><p>Hello, World</p><p>Have a nice day!</p></React.Fragment>);}
Функциональные компоненты возвращают один элемент HTML. Чтобы вернуть больше элементов, вы можете обернуть их в самый верхний <div> элемент.
В React есть встроенный элемент React.Fragment, который делает то же самое. Вот как это выглядит:
const MyComponent = (props) => {return (<React.Fragment><p>Hello, World</p><p>Have a nice day!</p></React.Fragment>);}
React обрабатывает React.Fragment как отдельный элемент HTML (например, <div>), но не отображает его, поэтому он не вносит вклад в DOM.
Хотя в названии функциональных компонентов есть слово «компонент», они не являются расширением объекта React.Component. Функциональные компоненты — это просто функции JavaScript, которые используют хуки React для обеспечения эквивалентной функциональности компонентов класса. Мы называем их компонентами, потому что функции построены с единственными аргументами объекта реквизита и возвращают элементы React.
Имя функции JavaScript может начинаться со строчной буквы, хотя это и не обязательно. С другой стороны, имена функциональных компонентов должны начинаться с заглавной буквы.
Поскольку функциональные компоненты не являются объектами, вы должны использовать хуки React для управления событиями состояния и жизненного цикла. Хуки не были представлены в React до версии 16.8, но они фактически сделали компоненты класса ненужными.
Функциональные компоненты также известны как компоненты без состояния, поскольку они не являются объектами класса и не сохраняют состояние. Вы можете передавать реквизиты функциональным компонентам в качестве аргументов, и они могут возвращать HTML.
Сравнение классов и функциональных компонентов
Давайте рассмотрим различия между классовыми и функциональными компонентами.
Компоненты класса:
- Расширение от React.Component
- Также известны как компоненты с отслеживанием состояния
- Может реагировать на события жизненного цикла
- Поддерживать информацию о состоянии
- Поддержка реквизита
- Требовать, чтобы конструктор сохранял состояние, прежде чем его можно будет использовать для передачи реквизитов родительскому классу.
- Требовать функцию рендеринга, которая возвращает элемент HTML
Функциональные компоненты :
- Не расширяйтесь от React.Component
- Известны как компоненты без состояния
- Не реагировать на события жизненного цикла
- Не храните информацию о состоянии
- Примет любой тип данных (реквизит)
- Не поддерживать конструктор
- Возвращать элементы HTML или ничего
- Поддержка хуков React 16.8
Какой компонент следует использовать?
В версии React 16.8 классовые компоненты уступили место функциональным компонентам. Функциональные компоненты более лаконичны, что приводит к более чистому и менее сложному коду. Они не включают методы жизненного цикла или унаследованные члены, которые могут потребоваться или не потребоваться для функциональности кода.
Все, что можно сделать с помощью компонентов класса, можно сделать и с помощью функциональных компонентов. Единственным исключением является то, что React поддерживает специальный компонент класса под названием Error Boundaries, который нельзя дублировать как функциональный компонент.
Поскольку компоненты класса наследуются от React.Component, с ними связаны методы состояния и жизненного цикла. Их присутствие требует от вас лучшего понимания того, когда произойдут события жизненного цикла и как реагировать на них для управления состоянием. Классы также требуют дополнительной настройки компонента или вызовов API для данных, в основном реализованных через конструктор. Совместное использование логики между несколькими объектами класса без реализации шаблонов проектирования более сложно, что приводит к тому, что код становится более сложным и трудным в обслуживании.
Решение о том, какой компонент использовать, всегда сводится к обсуждению наследования и композиции. Использование функциональных компонентов поощряет композицию, в то время как компоненты класса поддаются наследованию шаблонов проектирования. В настоящее время композиция считается лучшей практикой в программировании, поэтому в большинстве новых кодов React используются функциональные компоненты вместо компонентов классов. Тем не менее, React по-прежнему поддерживает компоненты класса для устаревших целей.
Заключение
В этой статье мы подробно рассмотрели компоненты React. К настоящему моменту вы должны хорошо понимать роли, которые компоненты играют в приложениях React, а также основные различия между классовыми и функциональными компонентами.
Отсюда вы можете изучить такие темы, как пакет react-dom (также известный как ReactDOM), который позволяет вам получать доступ и изменять DOM. Вы также можете узнать о жизненных циклах компонентов, методах жизненного цикла и их параметрах. Или вы можете изучить другие API React (например, setState), разницу между родительскими и дочерними компонентами или написать обработчики событий.
