Feliz: प्रश्न: Happy.ElmishComponents vs Happy.UseElmish

को निर्मित 8 अक्तू॰ 2020 · 9टिप्पणियाँ · स्रोत: Zaid-Ajaj/Feliz

नमस्कार दोस्त, कुछ समय के लिए मैंने आपको कुछ मंदबुद्धि प्रश्नों से परेशान किया है, इसलिए यह एक बार फिर से लेने का समय है। मैं

क्या आप कृपया किसी तरह वर्णन कर सकते हैं कि Feliz.ElmishComponents और Feliz.UseElmish क्या अंतर है? मैं देखता हूं कि वे दोनों एल्मिश एमवीयू भागों वाले रिएक्ट घटक हैं। क्या कोई विशिष्ट परिदृश्य हैं जहां आप दूसरे के बजाय एक को चुनेंगे? मुझे Feliz.UseElmish के उपयोग में आसान पसंद है और बस डर है कि मैं यहां कुछ और भी कूलर याद कर रहा हूं। मैं

स्रोत

Dzoukr

सबसे उपयोगी टिप्पणी

क्या कोई विशिष्ट परिदृश्य हैं जहां आप दूसरे के बजाय एक को चुनेंगे? मुझे Feliz.UseElmish का उपयोग करना आसान लगता है और बस डर है कि शायद मैं यहां कुछ और भी कूलर याद कर रहा हूं। मैं

हाय रोमन, अच्छा सवाल!

उल्लेखित कोडी जैसा अंतर यह है कि Feliz.UseElmish को Feliz.ElmishComponents पूर्ण घटक कार्यान्वयन के विपरीत हुक के साथ लिखा जाता है।

हालाँकि, यह पूरी कहानी नहीं है, क्योंकि Feliz.UseElmish भी _हुक सेमेन्टिक्स_ का अनुसरण करता है, जब यह निर्भरता सरणी के उपयोग द्वारा अंतिम तर्क के रूप में घटक पुन: आरंभीकरण की बात आती है जो Feliz.ElmishComponents से एक बड़ा अंतर है

Feliz.UseElmish को उसी घटक में सदस्यता जैसे अन्य हुक के साथ भी जोड़ा जा सकता है।

"पुनः आरंभीकरण" से मेरा क्या तात्पर्य है? ठीक है, कल्पना कीजिए कि आप URL परिवर्तनों के आधार पर उपयोगकर्ता प्रोफ़ाइल घटक को निम्नानुसार लोड कर रहे हैं:

#/user=profile/{userId} -> UserProfile { UserId = userId }

मूल रूप से, जब इनपुट UserId बदलता है, तो हम UserProfile घटक (राज्य को रीसेट करने के लिए init पर कॉल करना) को फिर से शुरू करना चाहते हैं:

type UserProfileProps = { UserId : int }

let UserProfile = React.functionComponent("UserProfile", fun (props: UserProfileProps) -> 
  let state, dispatch = React.useElmish(init props.UserId, update, [| props.UserId |])
  Html.h1 (sprintf "UserProfile(UserId=%d)" props.UserId)
)

// later on application  entry: 

React.router [
  router.onUrlChange (parseUrl >> UrlChanged >> dispatch) 
  router.children [
     match state.CurrentUrl with
     | [ "user-profile"; Route.Int userId ] -> UserProfile { UserId = userId }
     | _ -> Html.h1 "Not found" 
  ]
]

क्योंकि हम निर्भरता सरणी [| props.UserId |] को हुक (हुक के लिए तीसरा तर्क) प्रदान करते हैं, घटक स्वचालित रूप से ताज़ा हो जाएगा और एल्मिश प्रेषण लूप को रीसेट करने के लिए init फिर से कॉल करेगा। यह वही है जो हम चाहते हैं क्योंकि init इनपुट props.UserId का एक फ़ंक्शन था,

जब न तो init और न ही update फ़ंक्शन को घटक के प्रॉप्स से अतिरिक्त इनपुट की आवश्यकता होती है, तो आप बस एक खाली निर्भरता सरणी प्रदान करते हैं:

let state, dispatch = React.useElmish(init, update, [| |])

यह आमतौर पर उन घटकों के लिए उपयोग किया जाता है जिन्हें बाहर से इनपुट की आवश्यकता नहीं होती है, जैसे कि एप्लिकेशन का प्रवेश घटक।

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

अंतिम टिप: Feliz.UseElmish वास्तव में शक्तिशाली है क्योंकि यह आपको एक पूर्ण एल्मिश प्रेषण लूप देता है जैसे आप पारंपरिक एल्मिश ऐप्स के साथ उपयोग करते हैं। हालाँकि, जब आपके घटक सरल होते हैं, तो राज्य और संदेशों के लिए प्रकार सेट करना थोड़ा अधिक हो सकता है। क्या आपको कुछ राज्य के झंडे चाहिए? फिर React.useState साथ कुछ राज्य चर पर्याप्त हो सकते हैं। क्या आपको आगे की बातचीत के बिना कुछ डेटा लाने और प्रस्तुत करने की आवश्यकता है? तब React.useDeferred चाल चल सकती है। मैं जटिल पृष्ठों के लिए Feliz.UseElmish के लिए जाऊंगा जिसमें कई घटनाएं और बहुत से उपयोग की बातचीत होती है।

Zaid-Ajaj 8 अक्तू॰ 2020

❤4

सभी 9 टिप्पणियाँ

तो Feliz.ElmishComponents अब बहुत उपयोगी नहीं है, और Feliz.UseElmish । इसका कारण यह है कि मूल रूप से Feliz.ElmishComponents एक वर्ग आधारित घटक था, जिसे मैंने एक फ़ंक्शन घटक के रूप में फिर से लिखा था। उसके कुछ समय बाद, हमने महसूस किया कि यदि यह एक फ़ंक्शन घटक है तो इसे केवल एक हुक में परिवर्तित करना तुच्छ है। इस तरह Feliz.UseElmish उदय हुआ। तो अब Feliz.ElmishComponents वास्तव में केवल एक फ़ंक्शन घटक है जो हुक को कॉल करता है। वास्तव में, यदि आप Feliz.ElmishComponents के प्रोजेक्ट को देखें तो आप देखेंगे कि यह अभी छोटा है ।

Shmew 8 अक्तू॰ 2020

बहुत बहुत धन्यवाद, कोड़ी !!! तो अगर मैं सही ढंग से प्राप्त करता हूं, तो अभी Feliz.UseElmish डिफ़ॉल्ट है।

Dzoukr 8 अक्तू॰ 2020

हाँ, लोगों को न तोड़ने के लिए हमारे पास अभी भी Feliz.ElmishComponents । आप इसे बहिष्कृत मान सकते हैं।

Shmew 8 अक्तू॰ 2020

उत्तम! एक बार फिर धन्यवाद!

Dzoukr 8 अक्तू॰ 2020

यदि इसे "बहिष्कृत" किया गया है, तो इसे "अप्रचलित" चिह्नित करना और लोगों को अनुशंसित API पर पुनर्निर्देशित करना एक अच्छा विचार हो सकता है।

तुम क्या सोचते हो?

MangelMaxime 8 अक्तू॰ 2020

हां, हम सिर्फ एफ # टीम के सहयोगियों के साथ चर्चा कर रहे हैं कि हमें दस्तावेज़ीकरण के लिए पीआर करना चाहिए (शायद इस मुद्दे के लिंक के साथ)

Dzoukr 8 अक्तू॰ 2020

ठीक है, मैंने इसे यहाँ किया - https://github.com/Zaid-Ajaj/Feliz/pull/264

Dzoukr 8 अक्तू॰ 2020

👍1

क्या कोई विशिष्ट परिदृश्य हैं जहां आप दूसरे के बजाय एक को चुनेंगे? मुझे Feliz.UseElmish का उपयोग करना आसान लगता है और बस डर है कि शायद मैं यहां कुछ और भी कूलर याद कर रहा हूं। मैं

हाय रोमन, अच्छा सवाल!

Feliz.UseElmish को उसी घटक में सदस्यता जैसे अन्य हुक के साथ भी जोड़ा जा सकता है।

#/user=profile/{userId} -> UserProfile { UserId = userId }

type UserProfileProps = { UserId : int }

let UserProfile = React.functionComponent("UserProfile", fun (props: UserProfileProps) -> 
  let state, dispatch = React.useElmish(init props.UserId, update, [| props.UserId |])
  Html.h1 (sprintf "UserProfile(UserId=%d)" props.UserId)
)

// later on application  entry: 

React.router [
  router.onUrlChange (parseUrl >> UrlChanged >> dispatch) 
  router.children [
     match state.CurrentUrl with
     | [ "user-profile"; Route.Int userId ] -> UserProfile { UserId = userId }
     | _ -> Html.h1 "Not found" 
  ]
]

let state, dispatch = React.useElmish(init, update, [| |])

Zaid-Ajaj 8 अक्तू॰ 2020

❤4

वाह, ठेठ ज़ैद की प्रतिक्रिया। तुम्हें वो बातें सिखाना शुरू कर देनी चाहिए यार! मैं अंत में समझ सकता हूँ। एक बार फिर धन्यवाद! ❤️

Dzoukr 8 अक्तू॰ 2020

🚀1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Feliz: प्रश्न: Happy.ElmishComponents vs Happy.UseElmish

सबसे उपयोगी टिप्पणी

सभी 9 टिप्पणियाँ

संबंधित मुद्दों