{"componentChunkName":"component---src-templates-docs-js","path":"/docs/components-and-props.html","result":{"data":{"markdownRemark":{"html":"

Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз. На этой странице мы ознакомимся с самой идеей компонентов — детальное описание API находится здесь.

\n

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

\n

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

\n

Проще всего объявить React-компонент как функцию:

\n
function Welcome(props) {\n  return <h1>Привет, {props.name}</h1>;\n}
\n

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

\n

Ещё компоненты можно определять как классы ES6:

\n
class Welcome extends React.Component {\n  render() {\n    return <h1>Привет, {this.props.name}</h1>;\n  }\n}
\n

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

\n

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

\n

Как отрендерить компонент

\n

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

\n
const element = <div />;
\n

Но элементы могут описывать и наши собственные компоненты:

\n
const element = <Welcome name=\"Алиса\" />;
\n

Когда React встречает подобный элемент, он собирает все JSX-атрибуты и дочерние элементы в один объект и передаёт их нашему компоненту. Этот объект называется «пропсы» (props).

\n

Например, этот компонент выведет «Привет, Алиса» на страницу:

\n
function Welcome(props) {  return <h1>Привет, {props.name}</h1>;\n}\n\nconst element = <Welcome name=\"Алиса\" />;ReactDOM.render(\n  element,\n  document.getElementById('root')\n);
\n

Посмотреть на CodePen

\n

Давайте разберём, что именно здесь происходит:

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

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

\n

Если компонент начинается с маленькой буквы, React принимает его за DOM-тег. Например, <div /> это div-тег из HTML, а <Welcome /> это уже наш компонент Welcome, который должен быть в области видимости.

\n

Чтобы узнать больше про это соглашение, прочитайте Углублённое изучение JSX.

\n
\n

Композиция компонентов

\n

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

\n

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

\n
function Welcome(props) {\n  return <h1>Привет, {props.name}</h1>;\n}\n\nfunction App() {\n  return (\n    <div>\n      <Welcome name=\"Алиса\" />      <Welcome name=\"Базилио\" />      <Welcome name=\"Буратино\" />    </div>\n  );\n}\n\nReactDOM.render(\n  <App />,\n  document.getElementById('root')\n);
\n

Посмотреть на CodePen

\n

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

\n

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

\n

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

\n

Допустим, у нас есть компонент Comment:

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

Посмотреть на CodePen

\n

Этот компонент представляет собой комментарий в социальной сети. Его пропсы включают в себя author (объект), text (строка), и date (дата).

\n

С этим компонентом может быть не очень удобно работать из-за излишней вложенности. Мы также не можем повторно использовать его составные части. Давайте извлечём из него пару компонентов.

\n

Для начала извлечём Avatar:

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

Компоненту Avatar незачем знать, что он рендерится внутри Comment. Поэтому мы дали его пропу чуть менее конкретное имя — user, а не author.

\n

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

\n

Теперь можно немножко упростить наш Comment:

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

Следующим шагом извлечём компонент UserInfo, который рендерит Avatar рядом с именем пользователя:

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

Это позволит ещё сильнее упростить Comment:

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

Посмотреть на CodePen

\n

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

\n

Пропсы можно только читать

\n

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

\n

Возьмём для примера функцию sum:

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

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

\n

А вот пример нечистой функции — она записывает данные в свои же аргументы:

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

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

\n

React-компоненты обязаны вести себя как чистые функции по отношению к своим пропсам.

\n

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

","frontmatter":{"title":"Компоненты и пропсы","next":"state-and-lifecycle.html","prev":"rendering-elements.html"},"fields":{"path":"content/docs/components-and-props.md","slug":"docs/components-and-props.html"}}},"pageContext":{"slug":"docs/components-and-props.html"}},"staticQueryHashes":[]}