Я только что проверил HOC в React. Они довольно крутые. Однако, не просто ли обертывание компонента достигает того же результата?
Компонент более высокого порядка
Этот простой HOC передает состояние как свойства ComposedComponent
const HOC = ComposedComponent => class extends React.Component {
... lifecycle, state, etc;...
render() {
return (<ComposedComponent {...this.state} />);
}
}
Компонентная упаковка
Этот компонент передает состояние как свойства дочернему компоненту
class ParentComponent extends React.Component {
... lifecycle, state, etc;...
render() {
return (
<div>
{React.cloneElement(this.props.children, { ...this.state })}
</div>
);
}
}
Хотя использование немного отличается от двух, оба они кажутся одинаково повторными.
Где реальная разница между HOC и составлением компонентов через this.props.children? Существуют ли примеры, когда вы можете использовать только один или другой? Лучше использовать HOC. Это просто выбор, который у вас есть, где вы можете выбрать свой предпочтительный аромат?
