web-dev-qa-db-ja.com

HOC使用とコンポーネントラッピングの違い

ReactでHOCをチェックアウトしました。彼らはかなりクールです。ただし、コンポーネントを単純にラップしても同じ結果は得られませんか？

高次コンポーネント

この単純な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>
      );
    }      

}

使用方法は2つでわずかに異なりますが、どちらも同じように再利用可能です。

This.props.childrenを介したHOCと構成コンポーネントの本当の違いはどこにありますか？どちらか一方しか使用できない例はありますか？ HOCを使用することをお勧めします。これらは、好みのフレーバーを選択するための選択肢にすぎませんか？

reactjsreact-routerhigher-order-functionsreact-redux
40
Tabbyofjudah

高次コンポーネント（HOC）とコンテナコンポーネントは異なります。それらは異なるユースケースを持ち、似ているが異なる問題を解決します。

HOCはミックスインのようなものです。これらは、装飾されたコンポーネントが認識する機能を構成するために使用されます。これは、子をラップし、子をバカにするコンテナコンポーネント（またはnotコンテナの装飾された機能を認識する）とは対照的です。

コンテナが子に機能を追加できることは、小道具を転送するときに当てはまります。しかし、これは通常、小道具が子供たちに伝えられるという形です。コンテナでは、すでに作成された要素に単純に小道具を追加できないという制限があるため、これも厄介です。

したがって、this.props.childrenから子に新しいプロップを追加する場合は、cloneElementを使用する必要があります。これは、要素を再作成する必要があるため、効率的ではありません。

また、HOCは、コンポーネントを作成するための単なる方法（工場）です。そのため、これはrenderの外部で発生する可能性があります。

31
Davin Tryon

動的な高次コンポーネントが必要な場合に、コンテナアプローチがより適切に機能することを追加したいだけです。

HOCを定義できるレンダリングする要素が4つある場合は、render内に高次コンポーネントを作成しますが、レンダリング内で高次コンポーネントを呼び出すと<HigherOrderComponent/>はレンダリングのたびに再マウントするため、これは非常に悪いアイデアになります。

これはここに文書化されています。 https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method 。

しかし、一般的に私はHOCアプローチに行きます。

6
pudgereyem