53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Higher-Order Components
|
|||
|
|
localeTitle: Компоненты более высокого порядка
|
|||
|
|
---
|
|||
|
|
## Компоненты более высокого порядка
|
|||
|
|
|
|||
|
|
В реакторе **компонент более** высокого **порядка** (HOC) - это функция, которая принимает компонент и возвращает новый компонент. Программисты используют HOC для обеспечения **повторного использования компонентной логики** .
|
|||
|
|
|
|||
|
|
Если вы использовали Redux - х `connect` , вы уже работали с более высоким порядком компонентами.
|
|||
|
|
|
|||
|
|
Основная идея:
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
const EnhancedComponent = enhance(WrappedComponent);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Куда:
|
|||
|
|
|
|||
|
|
* `enhance` - это компонент `enhance` высокого порядка;
|
|||
|
|
* `WrappedComponent` - это компонент, который вы хотите улучшить; а также
|
|||
|
|
* `EnhancedComponent` - это новый компонент.
|
|||
|
|
|
|||
|
|
Это может стать телом `enhance` HOC:
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
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 - это всего лишь образец, который использует силу композиционной природы Реакта. **Они добавляют функции к компоненту** . С ними вы можете многое сделать!
|
|||
|
|
|
|||
|
|
## Другие источники
|
|||
|
|
|
|||
|
|
* [React docs: Компоненты более высокого порядка](https://reactjs.org/docs/higher-order-components.html)
|