Разница между использованием HOC и обвязкой компонентов
Я только что проверил 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. Это просто выбор, который у вас есть, где вы можете выбрать свой предпочтительный аромат?
Ответы
Ответ 1
Компоненты более высокого порядка (HOC) и компоненты контейнера различны. Они имеют разные варианты использования и решают подобные, но разные проблемы.
HOC подобны миксинам. Они используются для создания функциональных возможностей, о которых знает украшенный компонент. Это противоречит компонентам контейнера, которые обертывают дочерние элементы и позволяют детям быть немыми (или не знают о функциональности, украшенной контейнером).
Это верно при передаче реквизитов, что Контейнеры могут добавить функциональность своим детям. Но это обычно в виде реквизита, передаваемого детям. В контейнерах это также неудобно из-за ограничения, которое вы не можете просто добавить реквизиты к уже созданному элементу:
Итак, если вы хотите добавить новую опору для ребенка из this.props.children, вам нужно будет использовать cloneElement. Это не так эффективно, потому что это означает, что вам нужно воссоздать элементы.
Кроме того, HOC - это просто способ (factory) для создания Компонентов. Таким образом, это может произойти вне render.
Ответ 2
Я просто хотел добавить, что когда вам нужно динамические компоненты более высокого порядка, подход Container работает лучше.
Если вы, например, имеете 4 элемента для рендеринга, которые могли бы определять HOC, вы хотели бы создать компонент более высокого порядка внутри render, но поскольку вызов компонентов более высокого порядка внутри рендера вызывает перезапуск <HigherOrderComponent/> на каждом рендере это становится очень плохой идеей.
Это описано здесь; https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method.
Но в целом я бы пошел на HOC-подход.
