Компоненты и свойства

Компоненты позволяют разбить пользовательский интерфейс на независимые и повторно используемые части, позволяя рассматривать каждую часть изолированно. Эта страница предоставляет введение в концепцию компонентов. Вы можете найти подробную справочную информацию по API компонентов здесь.

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

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

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

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

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

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

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

Вышеперечисленные два компонента эквивалентны с точки зрения React.

Функциональные и Классовые компоненты оба обладают дополнительными функциями, которые мы обсудим в следующих разделах в следующих разделах.

Отображение компонента

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

const element = <div />;

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

const element = <Welcome name="Sara" />;

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

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

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Попробовать на CodePen

Давайте подведем итог того, что происходит в этом примере:

1. Мы вызываем ReactDOM.render() с элементом <Welcome name="Sara" />.
2. React вызывает компонент Welcome со значениями {name: 'Sara'} в качестве свойств.
3. Наш компонент Welcome возвращает элемент <h1>Hello, Sara</h1> в качестве результата.
4. React DOM эффективно обновляет DOM в соответствии с <h1>Hello, Sara</h1>.

Примечание: Всегда начинайте имена компонентов с большой буквы.

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

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

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

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

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

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')
);

Попробовать на CodePen

Обычно новые приложения React имеют единственный компонент App в самом верху. Однако если вы интегрируете React в существующее приложение, вы можете начать с нижнего уровня с небольшого компонента, такого как Button, и постепенно двигаться к вершине иерархии представления.

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

Не бойтесь разбивать компоненты на более мелкие компоненты.

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

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>
  );
}

Попробовать на CodePen

Он принимает author (объект), text (строку) и date (дату) в качестве свойств и описывает комментарий на веб-сайте социальной сети.

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

Сначала мы извлечем Avatar:

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

Компонент Avatar не должен знать, что он отображается внутри Comment. Именно поэтому мы дали его свойству более общее имя: user вместо author.

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

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

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, который отображает Avatar рядом с именем пользователя:

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

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

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>
  );
}

Попробовать на CodePen

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

Свойства являются только для чтения

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

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

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

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

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

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

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

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