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

Термін “рендер-проп” відноситься до техніки, в якій React-компоненти розділяють між собою один код (функцію) передаючи її через проп.

\n

Компонент з рендер-пропом приймає функцію, яка повертає React-елемент, і викликає її замість реалізації власної рендер-логіки.

\n
<DataProvider render={data => (\n  <h1>Привіт {data.target}</h1>\n)}/>
\n

Такі бібліотеки, як React Router, Downshift та Formik використовують рендер-пропси.

\n

На цій сторінці ми розглянемо чим рендер-пропси корисні та як їх писати.

\n

Використання рендер-пропсів для наскрізних завдань (Cross-Cutting Concerns)

\n

Компоненти — основа повторного використання коду в React. Але не завжди буває очевидно, як інкапсульовані в одному компоненті стан чи поведінку розділити з іншими компонентами, що їх потребують.

\n

Наприклад, наступний компонент відслідковує позицію курсора миші у веб-додатку:

\n
class MouseTracker extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n        <h1>Переміщуйте курсор миші!</h1>\n        <p>Поточна позиція курсора миші: ({this.state.x}, {this.state.y})</p>\n      </div>\n    );\n  }\n}
\n

По мірі переміщення курсора, компонент виводить його координати (x, y) всередині блоку <p>.

\n

Виникає питання: як ми можемо повторно використати цю ж поведінку в іншому компоненті? Іншими словами, якщо інший компонент потребує знати позицію курсора, чи можемо ми якимось чином інкапсулювати цю поведінку, щоб потім легко використати її в цьому компоненті?

\n

Оскільки компоненти являються базовою одиницею повторного використання коду в React, давайте зробимо невеликий рефакторинг. Виділимо компонент <Mouse>, який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.

\n
// Компонент <Mouse> інкапсулює потрібну нам поведінку...\nclass Mouse extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n\n        {/* ...але як вивести щось, окрім тегу <p>? */}\n        <p>Поточна позиція курсора миші: ({this.state.x}, {this.state.y})</p>\n      </div>\n    );\n  }\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <>\n        <h1>Переміщуйте курсор миші!</h1>\n        <Mouse />\n      </>\n    );\n  }\n}
\n

Тепер компонент <Mouse> інкапсулює в собі всю поведінку, пов’язану з реагуванням на події mousemove та зберіганням позиції (x, y) курсора, але він поки ще не достатньо гнучкий для повторного використання.

\n

Наприклад, скажімо в нас є компонент <Cat>, який рендерить зображення кота, що ганяється за мишкою по екрану. Ми можемо використати проп <Cat mouse={{ x, y }}> для передачі компоненту координати миші, щоб він знав де розмістити зображення на екрані.

\n

Спочатку ви можете спробувати рендерити <Cat> всередині методу render компонента <Mouse>, наприклад так:

\n
class Cat extends React.Component {\n  render() {\n    const mouse = this.props.mouse;\n    return (\n      <img src=\"/cat.jpg\" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />\n    );\n  }\n}\n\nclass MouseWithCat extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n\n        {/*\n          Ми могли б тут просто замінити тег <p> на компонент <Cat>... але тоді\n          нам потрібно було б створювати окремий компонент <MouseWithSomethingElse>\n          кожного разу, коли він нам потрібен, тому <MouseWithCat>\n          поки що не достатньо гнучкий для повторного використання.\n        */}\n        <Cat mouse={this.state} />\n      </div>\n    );\n  }\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Переміщуйте курсор миші!</h1>\n        <MouseWithCat />\n      </div>\n    );\n  }\n}
\n

Цей підхід працюватиме в нашому конкретному випадку, але ми й досі не досягли мети — інкапсуляції поведінки з можливістю повторного використання. Тепер кожен раз, коли нам потрібно отримати позицію курсора миші для різних варіантів, нам прийдеться створювати новий компонент (тобто по суті ще один <MouseWithCat>), який рендерить щось спеціально для цього випадку.

\n

Ось тут нам і знадобиться рендер-проп. Замість явного задавання <Cat> всередині компонента <Mouse> і зміни результату рендеру таким чином, ми можемо передавати компоненту <Mouse> функцію через проп (рендер-проп), яку він використає для динамічного визначення того, що потрібно рендерити.

\n
class Cat extends React.Component {\n  render() {\n    const mouse = this.props.mouse;\n    return (\n      <img src=\"/cat.jpg\" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />\n    );\n  }\n}\n\nclass Mouse extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.state = { x: 0, y: 0 };\n  }\n\n  handleMouseMove(event) {\n    this.setState({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  render() {\n    return (\n      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>\n\n        {/*\n          Замість статичного декларування того, що рендерить <Mouse>, використовуємо\n          проп `render` для динамічного визначення того, що потрібно відрендерити.\n        */}\n        {this.props.render(this.state)}\n      </div>\n    );\n  }\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Переміщуйте курсор миші!</h1>\n        <Mouse render={mouse => (\n          <Cat mouse={mouse} />\n        )}/>\n      </div>\n    );\n  }\n}
\n

Тепер замість того, щоб фактично клонувати компонент <Mouse> та жорстко задавати щось інше в його методі render для рішення конкретного випадку, ми надаємо проп render, який <Mouse> може використати для динамічного визначення того, що він рендерить.

\n

Більш конкретно, рендер-проп — це функція, передана як проп, яку компонент використовує, щоб визначити що рендерити.

\n

Ця техніка робить надзвичайно портативною поведінку, яку ми хотіли б використовувати повторно. Для отримання потрібної поведінки ми тепер рендеримо компонент <Mouse> з пропом render, який вказує що відрендерити для поточних координат (x, y) курсора.

\n

Одна цікава річ яку варто відзначити про рендер-пропси полягає в тому, що ви можете реалізувати більшість компонентів вищого порядку (HOC) з використанням звичайного компоненту з рендер-пропом. Наприклад, якщо ви надаєте перевагу HOC withMouse замість компонента <Mouse>, ви могли б легко його створити з використанням звичайного компоненту <Mouse> та рендер-пропу:

\n
// Якщо з певних причин вам дійсно потрібен HOC, ви можете легко\n// його створити з використанням звичайного компонента і рендер-пропа!\nfunction withMouse(Component) {\n  return class extends React.Component {\n    render() {\n      return (\n        <Mouse render={mouse => (\n          <Component {...this.props} mouse={mouse} />\n        )}/>\n      );\n    }\n  }\n}
\n

Таким чином, використання рендер-пропу дозволяє реалізувати будь-який з наведених вище патернів.

\n

Використання пропсів, відмінних від render

\n

Важливо пам’ятати, що із назви патерну “рендер-пропси” зовсім не слідує, що для його використання ви повинні використовувати проп з ім’ям render. Насправді будь-який проп, який є функцією і використовується компонентом для визначення того, що рендерити, технічно є “рендер-пропом”.

\n

Незважаючи на те, що наведені приклади використовують проп render, ми могли б так само легко використати проп children!

\n
<Mouse children={mouse => (\n  <p>Поточна позиція курсора миші: {mouse.x}, {mouse.y}</p>\n)}/>
\n

Також запам’ятайте, що проп children не обов’язково повинен бути зазначений у списку «атрибутів» у вашому JSX-елементі. Замість цього, ви можете помістити його прямо всередину елемента!

\n
<Mouse>\n  {mouse => (\n    <p>Поточна позиція курсора миші: {mouse.x}, {mouse.y}</p>\n  )}\n</Mouse>
\n

Ви побачите, що ця техніка використовується в API бібліотеки react-motion.

\n

Оскільки ця техніка дещо незвична, то при розробці такого API було б доречно явно вказати в propTypes, що проп children повинен бути функцією.

\n
Mouse.propTypes = {\n  children: PropTypes.func.isRequired\n};
\n

Застереження

\n

Будьте обережні при використанні рендер-пропсів разом з React.PureComponent

\n

Використання рендер-проп може звести нанівець переваги, що надає React.PureComponent, якщо ви створюєте функцію всередині методу render. Це спричинене тим, що поверхове порівняння пропсів завжди повертатиме false для нових пропсів, а в даному випадку кожен виклик render генеруватиме нове значення для рендер-пропа.

\n

Наприклад, продовжуючи з нашим вищезгаданим компонентом <Mouse>, якби Mouse наслідував React.PureComponent замість React.Component, наш приклад виглядав би наступним чином:

\n
class Mouse extends React.PureComponent {\n  // Така ж сама реалізація, як і раніше...\n}\n\nclass MouseTracker extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Переміщуйте курсор миші!</h1>\n\n        {/*\n          Погано! Значення пропа `render` буде\n          різним при кожному рендері.\n        */}\n        <Mouse render={mouse => (\n          <Cat mouse={mouse} />\n        )}/>\n      </div>\n    );\n  }\n}
\n

У цьому прикладі при кожному рендері <MouseTracker>, генерується нова функція в якості значення пропу <Mouse render>, таким чином зводячи нанівець ефект React.PureComponent, який <Mouse> наслідує!

\n

Щоб вирішити цю проблему, ви можете визначити проп як метод екземпляру, наприклад так:

\n
class MouseTracker extends React.Component {\n  // Визначаємо метод екземпляру, тепер `this.renderTheCat` завжди\n  // посилається на *ту саму* функцію, коли ми використовуємо його в рендері\n  renderTheCat(mouse) {\n    return <Cat mouse={mouse} />;\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Переміщуйте курсор миші!</h1>\n        <Mouse render={this.renderTheCat} />\n      </div>\n    );\n  }\n}
\n

В тих випадках, коли ви не можете статично задати проп (наприклад тому, що вам потрібно замкнути пропси та/або стан компоненту), <Mouse> повинно наслідувати React.Component.

","frontmatter":{"title":"Рендер-пропси","next":null,"prev":null},"fields":{"path":"content/docs/render-props.md","slug":"docs/render-props.html"}}},"pageContext":{"slug":"docs/render-props.html"}},"staticQueryHashes":[]}