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