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

Компонент с опорой рендеринга принимает функцию, которая возвращает элемент React, и вызывает его вместо реализации собственной логики рендеринга.

Давайте создадим пример компонента, который поможет нам показать / скрыть элементы.

import React from 'react';
import PropTypes from 'prop-types';
import { defaultTo } from 'lodash';
class VisibilityHelper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisplayed: defaultTo(props.initialState, false),
    };
this.hide = this.hide.bind(this);
    this.show = this.show.bind(this);
  }
hide() {
    this.setState({
      isDisplayed: false,
    });
  }
show() {
    this.setState({
      isDisplayed: true,
    });
  }
render() {
    return this.props.children({
      ...this.state,
      hide: this.hide,
      show: this.show,
    });
  }
}
VisibilityHelper.propTypes = {
  initialState: PropTypes.bool,
  children: PropTypes.func.isRequired,
};
export default VisibilityHelper;

Как я могу использовать этот компонент?

import VisibilityHelper from '...somewhere-inside-your-app';
function ButtonComponent() {
  return (
    <VisibilityHelper>
      {
        ({
           isDisplayed,
            hide,
            show
        }) => (
          <div>
            {
               isDisplayed &&
               <p onClick={hide}>Click to hide</p>
            }
<button onClick={show}>Click to display</button>
          </div>
        )
      }
    </VisibilityHelper>
  );
}

Этот ButtonComponent отобразит простую кнопку, при нажатии на которую он изменит свойство isDisplayed, внутренне используемое в VisibilityHelper, и отобразит скрытый содержание.

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

Реагировать на хуки

Согласно документации, хуки - это новая функция, которая позволяет вам использовать состояние и другие функции React без написания класса. В настоящее время они находятся в React v16.7.0-alpha и обсуждаются в «открытом RFC.

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

Замените рендеринг props на React Hooks.

Давайте перепишем компонент ConfirmationButton, заменив VisibilityHelper на React Hooks.

import { useState } from 'react';
function ConfirmationButton() {
  const [isDisplayed, show] = useState(false);
  
  return (
    <div>
      {
        isDisplayed &&
        <p onClick={() => show(false)}>Click to hide</p>
      }
      <button onClick={() => show(true)}>Click to display</button>
    </div>
  );
}

Заключение

React Hooks не заменяет свойства Render props, с ними можно делать больше вещей, но для этого варианта использования, который я думаю, хуки - хорошая функция для использования свойств состояний внутри компонента без состояния.