Компоненты и реквизит

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

Концептуально компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые «реквизит») и возвращают элементы React, описывающие то, что должно появиться на экране.

Компоненты функций и классов

Самый простой способ определить компонент - написать функцию JavaScript:

function SampleComponent(props) {
  return <h1>Hello, {props.name}</h1>;
}

Эта функция является допустимым компонентом React, потому что она принимает один? Props? (что означает свойства) аргумент объекта с данными и возвращает элемент React. Мы называем такие компоненты «функциональными компонентами» потому что они буквально функции JavaScript.

Компоненты класса определяются с использованием синтаксиса класса ES6, как показано ниже:

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

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

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

Ранее мы встречали и использовали только элементы React, представляющие теги DOM:

const element = <div />;

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

const element = <SampleComponent name="Vitalis" />;

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

Например, этот код отображает «Привет, Виталис» на странице:

function SayHello(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <SayHello name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

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

React рассматривает компоненты, начинающиеся со строчных букв, как теги DOM. Например, <div /> представляет тег HTML div, но <Welcome /> представляет компонент и требует, чтобы Welcome находился в области видимости.

Компоненты

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

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Извлечение компонентов

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

Например, рассмотрим этот компонент Комментарий:

function Comment(props) {
  return (
    <div className="Comment">
        <div className="UserInfo"  >
          <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        /  >
          <div className="UserInfo-name"  >
          {props.author.name}
          </div  >
        </div  >
        <div className="Comment-text"  >
        {props.text}
        </div  >
        <div className="Comment-date"  >
        {formatDate(props.date)}
        </div  >
      </div  >
  );
}

Этот компонент выше принимает автора (объект), текст (строку) и дату (дату) в качестве реквизита и описывает комментарий на веб-сайте социальной сети.

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

Чтобы сделать этот компонент гибким, давайте выделим из него несколько компонентов.

Сначала мы извлечем аватарку:

function Avatar(props) {
  return (
      <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Аватару не нужно знать, что он отображается внутри комментария. Вот почему мы дали его опоре более общее имя: пользователь, а не автор.

Теперь мы можем немного упростить комментарий:

function Comment(props) {
  return (
      <div className="Comment"  >
        <div className="UserInfo"  >
          <Avatar user={props.author} /  >
          <div className="UserInfo-name"  >
          {props.author.name}
          </div  >
        </div  >
        <div className="Comment-text"  >
        {props.text}
        </div  >
        <div className="Comment-date"  >
        {formatDate(props.date)}
        </div  >
      </div  >
  );
}

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

function UserInfo(props) {
  return (
      <div className="UserInfo"  >
        <Avatar user={props.user} /  >
        <div className="UserInfo-name"  >
        {props.user.name}
        </div  >
      </div  >
  );
}

Это позволяет нам еще больше упростить комментарий:

function Comment(props) {
  return (
      <div className="Comment"  >
        <UserInfo user={props.author} /  >
        <div className="Comment-text"  >
        {props.text}
        </div  >
        <div className="Comment-date"  >
        {formatDate(props.date)}
        </div  >
      </div  >
  );
}

Изначально извлечение компонентов может показаться грубой работой, но наличие палитры повторно используемых компонентов окупается в больших приложениях. Хорошее практическое правило заключается в том, что если часть вашего пользовательского интерфейса используется несколько раз (кнопка, панель, аватар) или достаточно сложна сама по себе (App, FeedStory, Comment), то это хороший кандидат для использования в качестве компонента многократного использования. ,

Реквизит только для чтения

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

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

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

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

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

React довольно гибкий, но у него есть одно строгое правило:

Все компоненты React должны действовать как чистые функции по отношению к своим объектам.

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