Компоненты более высокого порядка Redux, такие же как компоненты контейнера

Question

Я пытаюсь обернуть голову вокруг компонентов более высокого порядка, они такие же, как компоненты контейнера Redux. Плюс, какой рекомендуемый способ написать компоненты более высокого порядка (компоненты контейнера) - это через класс, который расширяет React.Component или без него, как указано на сайте redux.

Answer 1

На этой теме написано so much, поэтому я просто попытаюсь кратко объяснить концепцию и то, как она связана с Redux.

Вы можете придумать HOC как усилитель (или «декоратор»). Он использует существующий компонент и возвращает новый, улучшенный. Обычными задачами были бы: впрыскивание реквизита, составление, изменение способа его отображения и т. Д.

Обычно он реализуется как функция: получение одного компонента, создание другого. Шаблон может варьироваться в зависимости от вашей цели и потребностей.

Вы можете расширить обернутый компонент:

function hoc(WrappedComponent) { 
    return class HOC extends WrappedComponent { 
     render() { 
      return super.render(); 
     } 
    } 
} 

или сочинить обернутый компонент:

function hoc(WrappedComponent) { 
    return class HOC extends React.Component { 
     render() { 
      return (<WrappedComponent {...this.props} extraProp={1} />) 
     } 
    } 
} 

и если вы хотите, чтобы держать вещи простыми и не требуют полного жизненного цикла, вы также можете использовать компонент без гражданства:

function hoc(WrappedComponent) { 
    return (props) => (<WrappedComponent {...props} extraProp={1} />); 
} 

Предлагаю прочитать this для более глубокого понимания.

---

Теперь эта концепция не связана с Redux, но Redux делает использовать его.
connect() фактически является HOC, который выполняет проводку между обернутым компонентом и магазином (внедряет реквизиты и отвечает за повторный рендеринг). Он берет ваш презентационный компонент и возвращает подключенный компонент.
Контейнерные («подключенные») компоненты на самом деле Усовершенствованные компоненты.

Итак, чтобы сделать это ясно: Post является компонентом, мы используем HOC connect() для создания расширенного компонента PostContainer.