React предоставляет два основных паттерна для реализации Higher-Order Components (HOCs): Props Proxy и Inheritance Inversion. Каждый паттерн использует разный подход для улучшения обёрнутого компонента.
В этом подходе HOC оборачивает WrappedComponent и пробрасывает все полученные пропсы. HOC не расширяет обёрнутый компонент — вместо этого он отрисовывает его как дочерний элемент.
function ppHOC(WrappedComponent) {
return class PP extends React.Component {
render() {
return <WrappedComponent {...this.props} />
}
}
}
Ключевые характеристики:
В этом подходе возвращаемый HOC класс (называемый Enhancer) расширяет сам WrappedComponent. Это разворачивает традиционную иерархию наследования — вместо того, чтобы обёрнутый компонент расширял enhancer, enhancer расширяет обёрнутый компонент.
function iiHOC(WrappedComponent) {
return class Enhancer extends WrappedComponent {
render() {
return super.render()
}
}
}
Ключевые характеристики:
Выбирай Props Proxy в большинстве случаев — это проще и безопаснее. Используй Inheritance Inversion только когда нужен прямой доступ к внутреннему стейту обёрнутого компонента или его методам жизненного цикла.
В паттерне Props Proxy HOC расширяет класс WrappedComponent и может напрямую получать доступ к его внутреннему состоянию и методам жизненного цикла.
Новый — ещё не проверен сообществом
Вы