Vue: ディスカッション：HOCを作成するための最良の方法

こんにちは@ eu81273

このプロジェクトにご関心をお寄せいただき、ありがとうございます。

ただし、問題は使用法/サポートの質問であり、問​​題追跡システムはバグレポートと機能要求専用に予約されています（寄稿ガイドで概説されています）。

フォーラム、 Stack Overflow 、または不和チャットで質問することをお勧めします。喜んでお手伝いします。

FWIW、私は個人的な興味から見てみました-これは100％の場合に機能するはずです。

const HOC = WrappedComponent => ({
  props: typeof WrappedComponent === 'function' // accept both a construtor and an options object
    ? WrappedComponent.options.props 
    : WrappedComponent.props,
  render (h) {
    // reduce all slots to a single array again.
    const slots = Object.keys(this.$slots).reduce((arr, key) => arr.concat(this.$slots[key]), []);
    return h(WrappedComponent, {
      attrs: this.$attrs,
      props: this.$props,
      on: this.$listeners,
    }, slots);
 }
});

あなたの例でHOC04を編集したのは、それがソリューションに最も近いからです。

https://jsfiddle.net/Linusborg/o7yvL2jd/22/

編集：まだスロットの問題、調査中...

私はそれを解決したかもしれません： https：//jsfiddle.net/BogdanL/ucpz8ph4/。 スロットは現在ハードコーディングされていますが、それを解決するのは簡単です。

解決策は@lbogdanのメソッドに沿っているようですが、createElementには、scopedSlotsを取得できるのと同じように、スロットを取得する方法が必要です。

ただし、HoCを作成するのは_まだ_多くの努力です。 通過することを覚えておくべきことがたくさんありますが、reactを使用すると、WrappedComponentを小道具でレンダリングするだけです。

私は非常に単純な解決策を考えました...ここで何かが足りない場合は知らせてください：

const HOC06 = WrappedComponent => Vue.extend({
   mounted () {
      console.log('mounted 6')
   },
   ...WrappedComponent
})

@LinusBorgと@lbogdanによって与えられた例に基づくと、スロットを持つコンポーネントを処理できる最小のHoC実装は次のとおりです。

const HoC = WrappedComponent => ({
    props: typeof WrappedComponent === 'function' 
        ? WrappedComponent.options.props 
        : WrappedComponent.props,
    render (h) {
        const slots = this.$slots;
        const scopedSlots = {};
        Object.keys(slots).map(key => (scopedSlots[key] = () => slots[key]));

        return h(WrappedComponent, {
            attrs: this.$attrs,
            props: this.$props,
            on: this.$listeners,
            scopedSlots,
        });
     }
});

@blockaが述べたように、vue.jsを使用してHoCを作成することは依然として多くの努力です。

@ eu81273

const HOC06 = WrappedComponent => Vue.extend({
   mounted () {
      console.log('mounted 6')
   },
   ...WrappedComponent
})

これはあなたのテストに合格したようですよね？ もちろん、WrappedComponentがコンストラクターであるかオブジェクトであるかに応じて調整する必要がありますが、スロット、イベント、または小道具を渡す必要はありません。

vue.jsを使用してHoCを作成するのはまだ大変な作業です。

スロットの問題は別として、これはVueがReactよりも複雑なAPIを持っているという事実によるものであり、このシナリオでは不利です。 私はこの種のユースケースでReactsの最小限のAPIを賞賛しています-Vueはわずかに異なる設計目標で設計されているため、HOCはReactほど簡単には実現できません。

しかし、この初期設定をラップするcreateHOC()ヘルパー関数を作成するのはかなり簡単なはずですよね？

まあ、それは本当に最終目標が何であるかに依存します。 私が理解していることから、HoCの目標は、元のコンポーネント（WrappedComponent）を何らかの方法で変更（装飾）して、小道具、メソッド、イベントリスナーなどを追加（または挿入）することです（ミックスインのように、実際には：smile :)。 HOC06バリアントはコンポーネント定義を変更するだけで、インスタンス化の方法は変更しません。

@blocka HOCの目標は、多くの場合、状態を取得し（たとえば、redux / vuexから）、ラップされたコンポーネントの小道具に注入することです。これは、アプローチでは機能しません。

@LinusBorgそうです。 私はそれが真実であるにはあまりにも良かったこと、そして私が明白な何かを忘れていたことを知っていました。

これは、Vueで実際のユースケースHoCを実装する良い例だと思います： https：//github.com/ktsn/vuex-connect。

Vue Hocsは素晴らしいプラスになります（ほとんどの場合、vueとreactの議論で取り上げられるため）。 おそらく、vue-hoc-creatorパッケージを開発するために、公式のリポジトリを作成できますか？ そうすれば、堅牢でサポートされた実装に取り​​組むことができます

ところで、より良い方法があります：HOC自身の代わりに親コンポーネントから$ createElementを使用してください-これにより、子はスロットを正しく解決します：

https://jsfiddle.net/o7yvL2jd/23/

かわいいですが、公式ツールがある理由はなおさらです。
すべての人がこのコードを作り直し続けないでください。

2017年7月30日午後4時33分、ThorstenLünborgnotifications@ github.com
書きました：

ところで、より良い方法があります：親コンポーネントから$ createElementを使用します
HOC独自の代わりに-これにより、子はスロットを正しく解決します。

https://jsfiddle.net/o7yvL2jd/23/

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/6201#issuecomment-318927628 、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AACoury4Fix2jsX_lyTsS6CYOiHJaOuVks5sTOiugaJpZM4Oh0Ij
。

まだ公式の解決策を考え出していないことをお詫び申し上げます。 でもかわいいと思ってくれてうれしいです。

私の解決策も完璧ではありません。解決すべき他の問題があります。つまり、スコープ付きスロットは私の最新のトリックでは機能しません。

編集：ああ、気にしないでください、彼らは働きます

公式の解決策はおそらく行われるでしょう、少なくとも私はそう期待するでしょう-しかしそれは徹底的に考え抜かれ、テストされなければなりません。

さて、私はこれを簡単にする方法で遊んだ。

こちらをご覧ください： https ：//jsfiddle.net/Linusborg/j3wyz4d6/

APIは非常に大まかなアイデアのスケッチであるため、私は満足していませんが、APIが実行できるはずのことは何でも実行できます。

import { createHOC, createRenderFn, normalizeSlots } from 'vue-hoc'
const Component = {
  props: ['message']
  template: `<p>{{message}}</p>`
}
const HOC = createHOC(Component)

createHOCが処理します：

• コンポーネントから小道具をコピーする
• $createElementを親から交換して、適切なスロットを解決します。
• 名前を追加する
• （上記の例のように）2番目の引数が指定されていない場合、コンポーネントがレンダリングされ、次の引数が渡されます。
  
  
  
  • 小道具
  
  
  • attrs
  
  
  • リスナー
  
  
  • 通常のスロット
  
  
  • スコープスロット
  
  

もちろん、それだけではあまり役に立ちません。 したがって、楽しみは単純なComponentオブジェクトである2番目の引数で発生します。

自分でレンダリング関数を作成したい場合は、もちろん可能です。 小道具、属性、またはリスナーを拡張したいだけの場合は、 createRenderFnヘルパーを使用できます。 上記のデフォルトのようなレンダリング関数を作成しますが、渡したattrs 、 props 、またはlistenersを親からのものとマージします。

const HOC = createHOC(Component, {
  mounted() { 
    console.log(`lifecycle hooks work, it's simply component options`) 
  },
  render: createRenderFn(Component, {
    props: {
      message: 'Hello from your HOC!'
    }
  }
})

独自のレンダリング関数を作成する場合は、 normalizeSlotsヘルパーを使用して、オブジェクトをthis.$slotsから適切な配列に変換して渡すことができます。

const HOC = createHOC(Component, {
  render(h) {
    return h(Component, {
      props: { message: 'hi from HOC'}, // nothing from parent will be passed on
    }, normalizeSlots(this.$slots))
  }
})

コメントが欲しかった:)

@LinusBorgとてもいいです！

私が役立つと思うのは、実際のHoCのユースケースを考え出し、これらのプリミティブを使用してそれらを解決することです。

絶対。

私はこの問題について言及しています（編集（mybad）：https：//github.com/vuejs/vuejs.org/issues/658）。
文書化されていない$ createElement APIを使用しているので、プラグイン開発者のために文書化する価値があります。

リンクが間違っています（2014年の問題に本当にリンクしたい場合を除く）

しかし、はい、技術的には$ceateElement APIはまだAPIページにありません。

@AlexandreBonaventureその問題はvue0.x日からのものです。 ：笑顔：
また、 createElementはここに文書化されています： https ：//vuejs.org/v2/guide/render-function.html#createElement-Arguments。

この関数は、render関数の引数として文書化されていますが、 this.$createElementを介して利用できるわけではありません。 vuejs / vuejs.org / issues / 658に未解決の問題があります

@LinusBorgしかし、それは基本的にrender()関数に送信されるのと同じ関数ですよね？

まったく同じ。 このインスタンスメソッドを介してレンダリング関数の外部でも利用できることは、明確に文書化されていません。

上記の例を試してみましたが、より複雑なシナリオで使用する場合はいくつかの問題があるため、公式のリポジトリが必要です。 いくつかのメモ：

• createRenderFnは、attrs / props / listenersが関数であるかどうかを確認し、それらを評価する必要があります。これにより、既存の小道具に基づいて小道具などを動的に設定できます。
• 構成可能性については、コンポーネントを2番目のパラメーターにする必要があります。また、createHOCメソッド全体がカレーされた場合、複数のホッククリエーターを簡単にチェーンできます。
• ホックはミックスインとして追加されるため、2つのホックをチェーンしようとすると（つまり、 withDefaultProps(withProps(component, {}), {}) 、2番目のホックは親の小道具の例にアクセスできません）

皆さん、私はこれの実装を書くことを検討してきました。
https://github.com/jackmellis/vue-hoc/tree/develop
ご意見をお聞かせください。まもなく公開する予定です。 再構成スタイルのパッケージを書くことも考えています。

再構成スタイルのパッケージは素晴らしいでしょう。 本当に何かを使うことができた
最近withStateのように。

2017年8月19日土曜日の午前5時50分、 Jacknotifications @ github.comは次のように書いています。

皆さん、私はこれの実装を書くことを検討してきました。
https://github.com/jackmellis/vue-hoc/tree/develop
ご意見をお聞かせください。まもなく公開する予定です。 私もよ
再構成スタイルのパッケージを作成することを考えています。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/vuejs/vue/issues/6201#issuecomment-323513287 、またはミュート
スレッド
https://github.com/notifications/unsubscribe-auth/AACoumQWQMgpVeIvzJ3Ti8A4kLBD04Hhks5sZq_zgaJpZM4Oh0Ij
。

@jackmellisこれをリードしてくれてありがとう:)

以前に行ったフィードバックについてのいくつかの考え：

• カレーバージョンは素晴らしいポイントであり、ある意味で「デフォルト」である必要があると思います。これは、HOCが一般的に行われる方法ですよね。
• ミックスインの問題についての良い点。 これを軽減する方法をすでに知っていますか？ 現時点では持っていませんが、作成したカレーのバリエーションとVue.config.optionsMergeStrategiesを使用することで、これは軽減できるはずだと直感しています。

ネーミングも考えました。 createRenderFnは好きではありません。 renderComponentWithのようなものは、他のノードに埋め込むシナリオでは、より意味があり、より意味があります。

render(h) {
  return h('DIV', {staticClass: 'some-styling' }, renderComponentWith({ props: {... } }))
}

• 結局、私は両方を選びました。 したがって、 createHOCはコンポーネントファーストで、カレーなしで、次にカレー付きのバリアントcreateHOCcがあります。 Reactエコシステムは、OOPフレームワークのように機能するVueとは異なり、非常に機能に重点を置いています。 したがって、Vueの他の部分との一貫性を保つことが最善であると思いますが、それでも機能的な代替手段を提供します。
• これに対処するためのコードを追加しました。 ホック全体をミックスインとして使用するのではなく、optionsMergeStrategiesを使用してホックとオプションを手動でマージします。 これに関する唯一の問題は、optionsMergeStrategiesが最後のパラメーターとしてvmを予期していることですが、インスタンス化の前にマージを行っているため、vmはありません。
• createRenderFnはまさにそれが行っていることなので、私は非常に満足しています。 しかし、これをまとめるほど、人々が直接使用することは少なくなると思います。 一般的な使用法は次のようになります。

const hoc = createHOC(
  Component,
  {
    created(){
      /* ... */
    }
  },
  {
    props: (props) => ({
      ...props,
      someProp: 'foo'
    })
  }
);

おそらく私はあなたの例を完全に理解していませんか？

おそらく私はあなたの例を完全に理解していませんか？

いいえ、あなたは正しい方向に進んでいると思います。最後の返信の後でそれについてもう少し考えたとき、私の考えは同じ方向に進んでいました。

私の最初のPOCには、レンダリングされたコンポーネントの周りにマークアップを追加できるようにそれを含めましたが、UIも導入されるため、実際にはHOCではなくなったことを意味します...

はい、あなたは追加のコンテンツをレンダリングしようとしていると思います。あなたはHOCの領域外に出て、それを処理するためにSFCを作成したほうがよいでしょう。

npmでvue-hocを公​​開しました！

私はまた、準備ができていない状態で、簡単なドキュメントセッションであるvue-composeにも取り組んでいます。 再構成に似ていますが、Vueは多くの巧妙な処理（キャッシュ計算など、 thisの使用を推奨します）を処理するため、実際にはそれほど複雑な（または機能スタイルの）構文は必要ありません。

ご参考までに

https://www.npmjs.com/package/vue-compose

FWIW： https ：//vuejs.org/v2/api/#extends

extendsの動作は異なりますが、同様の結果を達成するために使用できます。それは事実です。

@jackmellisプロジェクトは確かな基盤を提供すると思うので、これを閉じます。 主にミックスイン/エクステンドに比べて大きなメリットが見られないため、HOCをコアに作成する方法を含めるつもりはありません。

主な理由は、ミックスイン/エクステンドに比べて大きなメリットが見られないためです。

@LinusBorgReactはすでにmixinを放棄しており、HOCは多くのメリットをもたらします。

この記事では、次の利点を分析しました。

• コンポーネントとそのミックスインの間のコントラクトは暗黙的です。
• 1つのコンポーネントでより多くのミックスインを使用すると、それらは衝突し始めます。
• ミックスインはコンポーネントにより多くの状態を追加する傾向がありますが、より少ない努力をする必要があります。
• ...。

VueチームはHoCをもっと慎重にサポートすることを検討する必要があると思います....簡単ではありませんが（Vueはこのように設計されていないようです）。

HoCがこれほど優れたコンセプトであるとは思いません。 たとえば、「暗黙の契約」の潜在的な衝突は、HoCでも発生する可能性があります。

React-routerのメンテナによるこの講演をご覧ください： https ：//www.youtube.com/watch？v = BcVAq3YFiuc

そうは言っても、私はそれらも悪いとは思いませんが、多くの状況で役立ちます。 それらは、Reactの世界で賞賛されている魔法の弾丸ではありませんが、独自の欠点があります。

上記の説明から明らかなように、VueのAPIと機能はより広く、より多くのエッジケースを処理する必要があるため、VueでのHoCの実装はReactの場合ほど簡単ではありません。

Vueで何も壊す必要がない限り、これを改善する方法については確かに話すことができます-HoCは私の見解では壊れるような変化を心配していません。

666

スロットを持つコンポーネントを処理できる最小のHoC実装は次のとおりです。

function hoc(WrappedComponent) {
  return {
    render(h) {
      return h(WrappedComponent, {
        on: this.$listeners,
        attrs:this.$attrs,
        scopedSlots: this.$scopedSlots,
      });
    },
  };
}

上記の返信と比較して、

• props configは必要ありません。これは、this。$ attrsから子に渡すことができます。
• 追加のスロットは必要ありません。this。$ scopedSlotsにはv2.6.0 +以降のスロットが含まれています

チェックする例を書きました