Понимание компонентов и реквизитов React

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

Другой способ думать о компонентах — это как о функциях JavaScript. Вместо того чтобы получать аргументы, они получают «реквизиты», а затем возвращают элементы React для создания того, что мы видим на экране!

Компоненты

Фактически, в React — все является компонентом! Даже стандартные HTML-теги являются компонентами, они встроены и добавляются по умолчанию.

Давайте рассмотрим пример:

import React from 'react'
import ReactDOM from 'react-dom'


ReactDOM.render(<h1>I'm a component!</h1>, 
document.getElementById('myapp'))

Здесь мы использовали JSX для вставки<h1>I'm a component!</h1> в элемент с id myapp. Наш h1 считается компонентом, благодаря React.DOM, и на самом деле все HTML-теги являются таковыми. Вы можете проверить их, набрав React.DOM в консоли браузера.

Создание пользовательских компонентов

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

Мы можем определять компоненты двумя способами, давайте рассмотрим каждый из них:

Компоненты функций

Функциональные компоненты — это просто функции JavaScript:

function Greeting(props) {
  return <h1>Hello, {props.username}!</h1>;
}

Что делает эту функцию компонентом React, так это то, что она принимает «props» (или свойства) в качестве аргумента с данными, а затем возвращает элемент React.

Компоненты классов

Классы ES6 также могут быть использованы для создания компонентов:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.username}!</h1>;
  }
}

Оба приведенных выше примера кода эквивалентны — и являются совершенно правильными способами создания компонентов.

До недавнего времени в мире React чаще использовались компоненты классов, поскольку компоненты классов позволяли определять компоненты с собственным состоянием (о состоянии я напишу в следующей статье!).

Однако с появлением React Hooks функциональные компоненты стали гораздо мощнее, чем раньше, и мы можем увидеть, как эта тенденция меняется на противоположную.

Крючки выходят за рамки этой статьи! Так что давайте продолжим о компонентах & реквизитах…

Рендеринг компонентов

Мы можем отобразить наши элементы, которые представляют собой теги DOM:

const element = <div />;

Мы также можем отображать наши элементы с помощью пользовательских компонентов:

const element = <Greet username="Richard" />;

Когда элемент содержит определяемый пользователем компонент, он будет передавать JSX-атрибуты компонента в виде объекта. В React этот объект мы называем «props».

Реквизиты

Таким образом, «props» — это то, как наши компоненты получают свои свойства.

Давайте посмотрим на это в действии:

function Greeting(props) {
  return <h1>Hello, {props.username}!</h1>;
}


const element = <Greet username="Richard" />;


ReactDOM.render(
  element,
  document.getElementById('root')
);

Этот код отобразит на странице надпись «Hello, Richard!».

Что здесь происходит?

• React вызывает компонент Greet с {name: 'Richard'} в качестве реквизита.
• Наш компонент Greet возвращает элемент <h1>Hello, Richard!</h1> в качестве результата.
• React DOM обновляет DOM для соответствия <h1>Hello, Richard!</h1>.

Примечание: Всегда начинайте имена компонентов с заглавной буквы! Почему? React рассматривает компоненты, начинающиеся со строчных букв, как теги DOM.

Реквизиты в функциональных компонентах

Следует отметить, что при работе с компонентами, имеющими несколько дочерних компонентов (см. ниже h1 и p), каждый дочерний компонент получает свои реквизиты от родительского.

При использовании компонентом функции props — это все, что передается, они доступны путем добавления props в качестве аргумента функции:

const BlogPostInfo = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

Реквизиты в компонентах классов

В компоненте класса реквизиты передаются по умолчанию. Они доступны как this.props в экземпляре компонента.

import React, { Component } from 'react'


class BlogPostInfo extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

Передача реквизитов дочерним компонентам — отличный способ передачи значений в приложениях. Компоненты либо хранят данные (имеют состояние), либо получают данные через свои реквизиты.

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

Реквизит по умолчанию

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

BlogPostInfo.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}


BlogPostInfo.defaultProps = {
  title: '',
  description: ''
}

Передача реквизитов

Когда мы инициализируем компонент, мы передаем реквизиты следующим образом:

const desc = 'My blog post description'



<BlogPostInfo title="My blog post title" description={desc} />

Если мы работаем со строками, мы можем передать наш реквизит как строку (как мы сделали выше с ‘title’). В противном случае мы используем переменные, как в случае с вышеупомянутым описанием, установленным в desc.

Реквизит «дети

Реквизит children немного отличается от обычного. Он содержит значение всего, что передается в body компонента, например:

<BlogPostInfo title="My blog post title" description="{desc}">
  More words
</BlogPostInfo>

В этом примере внутри BlogPostInfo мы можем получить доступ к «More words» через this.props.children.

Компоненты в компонентах

Компоненты могут включать другие компоненты в свой вывод.

Совершенно нормально создать компонент MyApp, который выводит Greet несколько раз:

function Greet(props) {
  return <h1>Hello, {props.username}!</h1>;
}


function MyApp() {
  return (
    <div>
      <Greet name="Bruce" />
      <Greet name="Bethany" />
      <Greet name="Bilbo" />
    </div>
  );
}


ReactDOM.render(
  <MyApp />,
  document.getElementById('root')
);

Реквизиты доступны только для чтения!

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

function sum(a, b) {
  return a + b;
}

Это «чистая» функция, поскольку она не пытается изменить свои входы и всегда будет возвращать один и тот же результат для одних и тех же входов.

Нечистая» функция — это функция, которая изменяет свои собственные входы:

function withdraw(account, amount) {
  account.total -= amount;
}

В React это запрещено! Каждый компонент должен вести себя как чистая функция по отношению к своему реквизиту.

В следующей статье я рассмотрю «состояние» в React. С помощью состояния наши компоненты могут изменять свой вывод в ответ на триггеры, такие как действия пользователя или реакция сети — без нарушения этого правила.

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

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen