{"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

Использование рендер-пропа для сквозных задач

\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          используем рендер-проп для динамического определения, что надо отрендерить.\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, для решения специфичного случая, мы предоставляем рендер-проп компоненту <Mouse>, который может динамически определить что рендерить.

\n

Иными словами, рендер-проп — функция, которая сообщает компоненту что необходимо рендерить.

\n

Эта техника позволяет сделать легко портируемым поведение, которое мы хотим повторно использовать. Для этого следует отрендерить компонент <Mouse> с помощью рендер-пропа, который сообщит, где отрендерить курсор с текущим положением (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

Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что children должен быть функцией в вашем propTypes при разработке такого API.

\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          Это плохо! Значение рендер-пропа будет\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":[]}