2.5 KiB
2.5 KiB
title | localeTitle |
---|---|
Higher-Order Components | Компоненты более высокого порядка |
Компоненты более высокого порядка
В реакторе компонент более высокого порядка (HOC) - это функция, которая принимает компонент и возвращает новый компонент. Программисты используют HOC для обеспечения повторного использования компонентной логики .
Если вы использовали Redux - х connect
, вы уже работали с более высоким порядком компонентами.
Основная идея:
const EnhancedComponent = enhance(WrappedComponent);
Куда:
enhance
- это компонентenhance
высокого порядка;WrappedComponent
- это компонент, который вы хотите улучшить; а такжеEnhancedComponent
- это новый компонент.
Это может стать телом enhance
HOC:
function enhance(WrappedComponent) {
return class extends React.Component {
render() {
const extraProp = 'This is an injected prop!';
return (
<div className="Wrapper">
<WrappedComponent
{...this.props}
extraProp={extraProp}
/>
</div>
);
}
}
}
В этом случае React.Component
enhance
возвращает анонимный класс, который расширяет React.Component
. Этот новый компонент выполняет три простых элемента:
- Оказание
WrappedComponent
в элементеdiv
; - Передача собственных реквизитов для
WrappedComponent
; а также - Внедрение дополнительной поддержки для
WrappedComponent
.
HOC - это всего лишь образец, который использует силу композиционной природы Реакта. Они добавляют функции к компоненту . С ними вы можете многое сделать!