Руководство по компонентам React: класс против функционала

Руководство по компонентам React Изучение

Если вы какое-то время программировали на 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.

Читайте также:  Как сделать ваш сайт быстрее с помощью Performance API

В 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 может начинаться со строчной буквы, хотя это и не обязательно. С другой стороны, имена функциональных компонентов должны начинаться с заглавной буквы.

Читайте также:  5 вещей, которые я хотел бы знать о Git

Поскольку функциональные компоненты не являются объектами, вы должны использовать хуки 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), разницу между родительскими и дочерними компонентами или написать обработчики событий.

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector