Vue: चर्चा: एचओसी बनाने का सबसे अच्छा तरीका

नमस्ते @ eu81273

इस परियोजना में आपकी रुचि के लिए धन्यवाद।

हालांकि, आपकी समस्या एक उपयोग/समर्थन प्रश्न है, और समस्या ट्रैकर विशेष रूप से बग रिपोर्ट और सुविधा अनुरोधों के लिए आरक्षित है (जैसा कि हमारी योगदान मार्गदर्शिका में बताया गया है)।

हम आपको इसे फ़ोरम , स्टैक ओवरफ़्लो या हमारी कलह चैट पर पूछने के लिए प्रोत्साहित करते हैं और वहां आपकी सहायता करने में प्रसन्नता हो रही है।

एफडब्ल्यूआईडब्ल्यू, मैंने व्यक्तिगत रुचि से एक नज़र डाली - यह 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 में स्लॉट लेने का एक तरीका होना चाहिए, जैसे यह स्कोप्ड स्लॉट ले सकता है।

हालांकि, एचओसी बनाने के लिए अभी भी बहुत प्रयास करना पड़ता है। पास करने के लिए याद रखने के लिए बहुत कुछ है, जबकि प्रतिक्रिया के साथ आप केवल रैप्डकंपोनेंट को प्रोप के साथ प्रस्तुत करते हैं।

मैंने बस एक बहुत ही सरल समाधान के बारे में सोचा ... मुझे बताएं कि क्या मुझे यहां कुछ याद आ रहा है:

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 बनाने के लिए अभी भी बहुत प्रयास करना है।

@यू81273

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

ऐसा लगता है कि आपकी परीक्षा पास हो गई है, नहीं? बेशक, आपको इसे इस आधार पर समायोजित करना होगा कि क्या WrappedComponent एक कंस्ट्रक्टर या ऑब्जेक्ट है, लेकिन स्लॉट्स, इवेंट्स या प्रॉप्स को पास करने की कोई आवश्यकता नहीं है।

vue.js के साथ एक HoC बनाने के लिए अभी भी बहुत प्रयास करना है।

स्लॉट के साथ समस्या के अलावा, यह सिर्फ इस तथ्य के कारण है कि Vue में React की तुलना में अधिक जटिल API है, जो इस परिदृश्य में एक नुकसान है। मैं इस प्रकार के उपयोग के मामलों में न्यूनतम एपीआई प्रतिक्रिया की प्रशंसा करता हूं - Vue को केवल थोड़े अलग लक्ष्य के साथ डिज़ाइन किया गया था, इसलिए HOCs आसानी से React में नहीं आते हैं।

लेकिन यह एक createHOC() सहायक फ़ंक्शन बनाने के लिए काफी छोटा होना चाहिए जो आपके लिए इस प्रारंभिक सेटअप को लपेटता है, है ना?

खैर, यह वास्तव में निर्भर करता है कि अंतिम लक्ष्य क्या है। जो मैं समझता हूं, एचओसी का लक्ष्य किसी भी तरह से मूल घटक (लपेटा कॉम्पोनेंट) को प्रोप, विधियों, ईवेंट श्रोताओं इत्यादि को जोड़ने (या इंजेक्ट) करने के लिए बदलना (सजाना) है (एक मिश्रण की तरह, वास्तव में: मुस्कान:)। HOC06 प्रकार केवल घटक परिभाषा को बदलता है, यह उस तरीके को नहीं बदलता है जिसमें इसे तत्काल किया जाता है।

@blocka एचओसी का लक्ष्य अक्सर राज्य प्राप्त करना होता है (उदाहरण के लिए redux/vuex से) और इसे लिपटे घटक के प्रोप में इंजेक्ट करें - जो आपके दृष्टिकोण के साथ काम नहीं करेगा।

@LinusBorg सही। मुझे पता था कि यह सच होना बहुत अच्छा था और मैं कुछ स्पष्ट भूल रहा था।

मुझे लगता है कि यह Vue में वास्तविक उपयोग के मामले HoC को लागू करने का एक अच्छा उदाहरण है: https://github.com/ktsn/vuex-connect।

Vue Hocs एक बढ़िया प्लस होगा (क्योंकि यह लगभग हमेशा किसी भी Vue बनाम प्रतिक्रिया बहस में लाया जाता है)। शायद एक आधिकारिक रेपो एक vue-hoc-creator पैकेज विकसित करने के लिए बनाया जा सकता है? इस तरह हम एक मजबूत, समर्थित, कार्यान्वयन पर काम कर सकते हैं

बीटीडब्ल्यू, एक बेहतर तरीका मिला: एचओसी के बजाय मूल घटक से $ createElement का उपयोग करें - इससे बच्चे को स्लॉट को सही तरीके से हल करने में मदद मिलती है:

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

प्यारा, लेकिन कुछ आधिकारिक उपकरण होने के लिए और भी अधिक कारण तो हम
सभी इस कोड का पुन: आविष्कार न करें।

रविवार, 30 जुलाई, 2017 को शाम 4:33 बजे, थोरस्टन लुनबोर्ग नोटिफिकेशन @github.com
लिखा था:

बीटीडब्ल्यू, एक बेहतर तरीका मिला: मूल घटक से $ createElement का उपयोग करें
एचओसी के बजाय - यह बच्चे को स्लॉट्स को सही ढंग से हल करने में मदद करता है:

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/

मैं एपीआई से खुश नहीं हूं क्योंकि यह एक बहुत ही मोटा विचार स्केच है, लेकिन यह कुछ भी करने में सक्षम है जो इसे करने में सक्षम होना चाहिए।

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

createHOC निम्न का ध्यान रखेगा:

• घटक से सहारा की प्रतिलिपि बनाना
• उचित स्लॉट को हल करने के लिए माता-पिता से $createElement की अदला-बदली करें।
• एक नाम जोड़ें
• यदि कोई दूसरा तर्क प्रदान नहीं किया जाता है (जैसा कि उपरोक्त उदाहरण में है), यह घटक को प्रस्तुत करता है और आगे बढ़ता है:
  
  
  
  • रंगमंच की सामग्री
  
  
  • attrs
  
  
  • श्रोताओं
  
  
  • सामान्य स्लॉट
  
  
  • स्कोप्ड स्लॉट
  
  

यह अपने आप में बहुत उपयोगी नहीं है, बिल्कुल। तो मज़ा दूसरे तर्क में होता है जो एक साधारण घटक वस्तु है।

यदि आप रेंडर फ़ंक्शन को स्वयं लिखना चाहते हैं, तो आप निश्चित रूप से कर सकते हैं। यदि आप केवल प्रॉप्स, अटर्स या श्रोताओं का विस्तार करना चाहते हैं, तो आप 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!'
    }
  }
})

यदि आप अपना स्वयं का रेंडर फ़ंक्शन लिखना चाहते हैं, तो आप ऑब्जेक्ट को this.$slots से पास करने के लिए उचित सरणी में बदलने के लिए normalizeSlots सहायक का उपयोग कर सकते हैं:

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 बहुत बढ़िया!

मुझे लगता है कि वास्तविक जीवन एचओसी उपयोग के मामलों के साथ आने और इन प्राइमेटिव्स का उपयोग करके उन्हें हल करने में मदद मिलेगी।

बिल्कुल।

मैं इस मुद्दे का उल्लेख कर रहा हूं (संपादित करें (mybad): https://github.com/vuejs/vuejs.org/issues/658)।
चूंकि आप गैर-दस्तावेज $createElement API का उपयोग कर रहे हैं, यह प्लगइन डेवलपर्स के लिए इसे दस्तावेज करने लायक होगा।

आपका लिंक गलत है (जब तक कि आप वास्तव में 2014 से किसी मुद्दे से लिंक नहीं करना चाहते)

लेकिन हाँ, तकनीकी रूप से $ceateElement API अभी भी API पृष्ठ पर अनुपलब्ध है।

@AlexandreBonaventure यह मुद्दा vue 0.x दिनों का है। :मुस्कुराओ:
साथ ही, createElement यहां प्रलेखित है: https://vuejs.org/v2/guide/render-function.html#createElement -Arguments ।

फ़ंक्शन को रेंडर फ़ंक्शन के तर्क के रूप में प्रलेखित किया गया है, लेकिन यह नहीं कि यह this.$createElement के माध्यम से उपलब्ध है। इसके लिए vuejs/vuejs.org/issues/658 पर एक खुला मुद्दा है

@LinusBorg लेकिन यह मूल रूप से वही फ़ंक्शन है जो render() फ़ंक्शन पर भेजा जाता है, है ना?

बिल्कुल वैसा ही। यह स्पष्ट रूप से प्रलेखित नहीं है कि यह इस इंस्टेंस विधि के माध्यम से रेंडर फ़ंक्शन के बाहर भी उपलब्ध है।

मैं उपरोक्त उदाहरण के साथ सिर्फ एक नाटक कर रहा हूं और इसे अधिक जटिल परिदृश्य में उपयोग करते समय कुछ समस्याएं हैं, इसलिए आधिकारिक रेपो की आवश्यकता है। नोट्स की एक जोड़ी:

• createRenderFn को जांचना चाहिए कि क्या attrs/props/श्रोता कार्य कर रहे हैं और उनका मूल्यांकन करें, यह आपको मौजूदा प्रॉप्स के आधार पर गतिशील रूप से प्रॉप्स आदि सेट करने की अनुमति देगा।
• कंपोज़िबिलिटी के लिए कंपोनेंट दूसरा पैरामीटर होना चाहिए, और अगर पूरी createHOC मेथड करी हो तो हम आसानी से कई हॉक क्रिएटर्स को एक साथ चेन कर सकते हैं।
• क्योंकि हॉक को मिक्सिन के रूप में जोड़ा जाता है, यदि आप 2 हॉक्स को एक साथ जोड़ने की कोशिश करते हैं (यानी withDefaultProps(withProps(component, {}), {}) दूसरे हॉक के पास माता-पिता के प्रॉप्स उदाहरण तक पहुंच नहीं है

हे दोस्तों, मैं इसका एक कार्यान्वयन लिखने पर विचार कर रहा हूं।
https://github.com/jackmellis/vue-hoc/tree/develop
मुझे बताएं कि आप क्या सोचते हैं और मैं इसे जल्द ही प्रकाशित करूंगा। मैं एक रीकंपोज़-स्टाइल पैकेज लिखने के बारे में भी सोच रहा हूं।

एक रीकंपोज़ स्टाइल पैकेज बहुत अच्छा होगा। वास्तव में कुछ इस्तेमाल कर सकता था
हाल ही में withState की तरह।

शनिवार, 19 अगस्त, 2017 को सुबह 5:50 बजे, जैक नोटिफिकेशन @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 बढ़िया है कि आप इस पर लीड लेते हैं :)

आपके द्वारा पहले दी गई प्रतिक्रिया पर कुछ विचार:

• मुझे लगता है कि करी संस्करण एक महान बिंदु है और एक तरह से "डिफ़ॉल्ट" होना चाहिए, जैसा कि आमतौर पर एचओसी कैसे किया जाता है, है ना?
• मिश्रण के साथ समस्या के बारे में अच्छा बिंदु। क्या आपके पास पहले से ही कोई विचार है कि इसे कैसे कम किया जाए? मेरे पास इस समय एक नहीं है, लेकिन मेरी आंत की भावना यह है कि यह आपके द्वारा बनाए गए करीबी रूपों के संयोजन में कम करने योग्य होना चाहिए और Vue.config.optionsMergeStrategies का उपयोग करना चाहिए

मैंने नामकरण के बारे में भी सोचा। मुझे createRenderFn पसंद नहीं है, $#$2 renderComponentWith #$ जैसा कुछ अधिक सार्थक होगा और उस परिदृश्य में अधिक समझ में आता है जहां हम इसे कुछ अन्य नोड्स में एम्बेड करते हैं:

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

• अंत में मैंने दोनों को चुना है। तो createHOC घटक-पहले गैर-करी है, और फिर एक करीबी संस्करण है createHOCc । रिएक्ट पारिस्थितिकी तंत्र Vue के विपरीत बहुत कार्यात्मक-केंद्रित है, जो OOP ढांचे की तरह अधिक कार्य करता है। इसलिए मुझे लगता है कि बाकी Vue के अनुरूप रहना सबसे अच्छा है, लेकिन फिर भी एक कार्यात्मक विकल्प प्रदान करता है।
• मैंने इससे निपटने के लिए अभी कुछ कोड जोड़ा है। पूरे हॉक को एक मिक्सिन के रूप में रखने के बजाय, मैं मैन्युअल रूप से हॉक और ऑप्शंस को ऑप्शंसमर्ज स्ट्रैटेजीज का उपयोग करके मर्ज करता हूं। इसके साथ एकमात्र समस्या यह है कि optionsMergeStrategies अंतिम पैरामीटर के रूप में एक वीएम की अपेक्षा करता है, लेकिन मैं तत्कालता से पहले विलय कर रहा हूं, इसलिए कोई वीएम नहीं है।
• मैं createRenderFn से काफी खुश हूं क्योंकि यह ठीक यही कर रहा है। लेकिन जितना अधिक मैं इसे एक साथ रखता हूं, उतना ही कम मुझे लगता है कि लोग इसका सीधे उपयोग करेंगे। सामान्य उपयोग कुछ ऐसा होगा:

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

शायद मैं आपका उदाहरण पूरी तरह समझ नहीं पा रहा हूं?

शायद मैं आपका उदाहरण पूरी तरह समझ नहीं पा रहा हूं?

नहीं, मुझे लगता है कि आप सही रास्ते पर हैं, मेरे विचार उसी दिशा में जा रहे थे जब मैंने अपने अंतिम उत्तर के बाद इसके बारे में कुछ और सोचा।

अपने प्रारंभिक पीओसी में मैंने इसे शामिल किया ताकि लोग प्रदान किए गए घटक के आसपास अतिरिक्त मार्कअप जोड़ सकें, लेकिन इसका मतलब यह होगा कि यह वास्तव में अब एचओसी नहीं है, क्योंकि यह यूआई भी लाएगा ...

हां, मुझे लगता है कि आप अतिरिक्त सामग्री प्रस्तुत करने का प्रयास कर रहे हैं, आप एचओसी क्षेत्र से बाहर चले गए हैं और इसे संभालने के लिए एक एसएफसी भी बना सकते हैं।

मैंने अभी - अभी npm पर

मैं vue-compose पर भी काम कर रहा हूं जो एक त्वरित दस्तावेज़ीकरण-सत्र-तैयार होने से भी दूर है। हालांकि यह पुनर्संयोजन के समान है, Vue बहुत सारी चतुर चीजों को संभालता है (जैसे कैशिंग कंप्यूटेशंस और यह this के उपयोग को प्रोत्साहित करता है) इसलिए इसे वास्तव में जटिल (या कार्यात्मक-शैली) सिंटैक्स की आवश्यकता नहीं है।

fyi

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

एफडब्ल्यूआईडब्ल्यू: https://vuejs.org/v2/api/#extends

extends अलग तरह से काम करता है, लेकिन इसका उपयोग समान परिणाम प्राप्त करने के लिए किया जा सकता है, यह सच है।

मैं इसे बंद कर दूंगा क्योंकि मुझे लगता है कि @jackmellis परियोजना एक ठोस आधार प्रदान करती है। हम एचओसी को कोर में बनाने का कोई तरीका शामिल करने का इरादा नहीं रखते हैं, मुख्यतः क्योंकि हमें मिक्सिन्स / एक्सटेंड्स पर कोई बड़ा लाभ नहीं दिखता है।

मुख्य रूप से क्योंकि हमें मिक्सिन्स / एक्सटेंड्स पर कोई बड़ा लाभ नहीं दिखता है।

@LinusBorg React ने पहले ही mixin को छोड़ दिया है, HOC बहुत सारे लाभ लाता है।

इस लेख ने लाभों का विश्लेषण किया है:

• एक घटक और उसके मिश्रण के बीच अनुबंध निहित है।
• जैसे ही आप एक घटक में अधिक मिश्रण का उपयोग करते हैं, वे आपस में टकराने लगते हैं।
• मिक्सिन आपके घटक में अधिक स्थिति जोड़ते हैं जबकि आपको कम के लिए प्रयास करना चाहिए।
• ....

मुझे लगता है कि Vue टीम को अधिक सावधानी से HoC का समर्थन करने पर विचार करना चाहिए .... हालाँकि यह आसान नहीं है (ऐसा लगता है कि Vue को इस तरह से डिज़ाइन नहीं किया गया है)।

मुझे विश्वास नहीं है कि एचओसी इतनी बेहतर अवधारणा है। उदाहरण के लिए, "अंतर्निहित अनुबंध" संभावित संघर्ष एचओसी के साथ भी हो सकता है।

इसके बारे में रिएक्ट-राउटर के अनुरक्षक द्वारा यह वार्ता देखें: https://www.youtube.com/watch?v=BcVAq3YFiuc

कहा जा रहा है कि मुझे नहीं लगता कि वे बुरे हैं, वे कई स्थितियों में उपयोगी हैं। वे सिर्फ जादू की गोली नहीं हैं जिनकी उन्हें रिएक्ट दुनिया में प्रशंसा की जाती है, हालांकि, उनके अपने डाउनसाइड्स हैं।

जैसा कि ऊपर की चर्चा से स्पष्ट है, Vue में HoCs को लागू करना उतना तुच्छ नहीं है जितना कि React में है क्योंकि Vue का API और कार्यक्षमता व्यापक है और अधिक एज मामलों का ध्यान रखा जाना है।

हम निश्चित रूप से इस बारे में बात कर सकते हैं कि इसे कैसे सुधारें जब तक कि इसे Vue में कुछ भी तोड़ने की आवश्यकता न हो - HoC's मेरे विचार में एक ब्रेकिंग बदलाव के लायक नहीं हैं।

666

सबसे न्यूनतम एचओसी कार्यान्वयन जो स्लॉट के साथ घटकों को संभाल सकता है वह है:

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

ऊपर दिए गए उत्तरों की तुलना में,

• प्रॉप्स कॉन्फिग की जरूरत नहीं है, जिसे इससे पास किया जा सकता है।$attrs to child
• अतिरिक्त स्लॉट की आवश्यकता नहीं है, यह।$scopedSlots में v2.6.0+ . के बाद से स्लॉट हैं

मैंने जाँच करने के लिए एक उदाहरण लिखा