प्रतिक्रिया PropTypes बनाम प्रवाह


101

PropTypes और Flow समान चीजों को कवर करते हैं, लेकिन विभिन्न तरीकों का उपयोग कर रहे हैं। PropTypes आपको रनटाइम के दौरान चेतावनी दे सकता है, जो सर्वर से आने वाली विकृत प्रतिक्रियाओं को जल्दी से खोजने में मददगार हो सकता है, हालांकि, फ्लो भविष्य लगता है और जेनेरिक जैसी अवधारणाओं के साथ एक बहुत ही लचीला समाधान है। इसके अलावा, न्यूक्लाइड द्वारा दी जाने वाली स्वतः पूर्णता फ्लो के लिए एक बड़ा प्लस है।

मेरा प्रश्न अब एक नया प्रोजेक्ट शुरू करने के लिए जाने का सबसे अच्छा तरीका है। या यह दोनों प्रवाह और PropTypes का उपयोग करने के लिए एक अच्छा समाधान हो सकता है? दोनों का उपयोग करने में समस्या यह है कि आप बहुत सारे डुप्लिकेट कोड लिखते हैं। यह मेरे द्वारा लिखे गए एक म्यूजिक प्लेयर ऐप का एक उदाहरण है:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

दोनों परिभाषाओं में मूल रूप से एक ही जानकारी होती है और जब डेटा प्रकार बदला जाता है, तो दोनों परिभाषाओं को अद्यतन करने की आवश्यकता होती है।

मैंने इस बैबल प्लग को PropTypes के प्रकार की घोषणाओं में बदलने के लिए पाया, जो एक समाधान हो सकता है।


1
अगर आप फ्लो के साथ इस पोस्ट को शुरू करना चाहते हैं: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch

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

प्रयास करें tcomb के माध्यम से कोलाहल प्लगइन स्थिर और क्रम प्रकार प्रवाह और tcomb का उपयोग कर की जाँच के लिए।
कोमर्स

जवाबों:


81

इस सवाल को पूछने के एक साल बाद, मैं इस बारे में एक अपडेट देना चाहता था कि इस समस्या के साथ मेरे अनुभव कैसे हैं।

जैसा कि फ्लो बहुत विकसित हुआ, मैंने इसके साथ अपना कोडबेस लिखना शुरू कर दिया और किसी भी नई प्रॉपटाइप परिभाषा को नहीं जोड़ा। अब तक, मुझे लगता है कि यह जाने का अच्छा तरीका है, क्योंकि जैसा कि ऊपर उल्लेख किया गया है, यह आपको न केवल प्रॉप्स बल्कि आपके कोड के अन्य हिस्सों को भी टाइप करने की अनुमति देता है। यह वास्तव में उदाहरण के लिए काम में आता है जब आपके पास राज्य में आपके पास प्रॉपर की एक प्रति होती है, जिसे उपयोगकर्ता द्वारा संशोधित किया जा सकता है। इसके अलावा, IDEs में ऑटो-पूरा करना एक शानदार लाभ है।

एक या दूसरी दिशा में स्वचालित कन्वर्टर्स ने वास्तव में बंद नहीं किया। इसलिए, नई परियोजनाओं के लिए, मैं अब PropTypes पर फ़्लो का उपयोग करने की सलाह दूंगा (यदि आप दो बार टाइपिंग नहीं करना चाहते हैं तो)।


आप किस आईडीई का उपयोग करते हैं? Webstorm?
सेर्गेई.टेन

3
मैं ide-flowtype प्लगइन के साथ एटम का उपयोग कर रहा हूं।
danielbuechele

चाइल्डकॉन्टेक्सटाइप्स का उपयोग करते समय आपको अभी भी प्रोपेप्ट्स की आवश्यकता होती है - stackoverflow.com/questions/42395113/…
gkd

3
यह अब उपयोग propTypes करने की जरूरत है, जब नए संदर्भ एपीआई के कारण बच्चे को संदर्भों से निपटने: reactjs.org/docs/context.html
SteveB

35

दोनों के अलावा अन्य प्रकार की जाँच के बहुत व्यापक क्षेत्र से संबंधित है, दोनों के बीच वास्तव में बहुत समानता नहीं है।

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

PropTypes एक मूल प्रकार का चेकर है, जिसे React पर पैच किया गया है। यह किसी दिए गए घटक को पारित होने के प्रकार के अलावा और कुछ भी नहीं देख सकता है।

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

यदि आप केवल प्रोप प्रकारों की जांच करना चाहते हैं, तो अपने बाकी के कोडबेस को अधिक जटिल न करें और सरल विकल्प के साथ जाएं।


11
हां, वे काम करने के तरीके में बहुत भिन्न हैं। हालांकि, उनका उपयोग करने का उद्देश्य बहुत समान है, मुझे लगता है। लेकिन आपने जो एक बात बताई है वह एक अच्छी बात है: फ्लो चलो आप अपने कोडबेस को और अधिक कवर करते हैं, जबकि आप PropTypes का उपयोग करते समय प्रॉप्स तक सीमित हैं।
डेनियलबुकेले

2
उपयोग का उद्देश्य केवल बहुत समान है यदि आप केवल प्रोप प्रकारों की जांच करने के लिए फ़्लो का उपयोग करते हैं। एक मूल रूप से एक भाषा है, दूसरा एक पुस्तकालय है।
डैन प्रिंस

@DanPrince से पूरी तरह सहमत हैं। और मुझे नहीं लगता कि PropTypes के साथ सर्वर से विकृत प्रतिक्रियाओं की जांच करने के लिए यह एक अच्छा विचार है। यह बेहतर है अगर आपके पास इसके लिए मैनुअल चेक है और आपका यूआई ठीक से जवाब देता है (उदाहरण के लिए एक चेतावनी संदेश प्रदर्शित करता है), बस एक चेतावनी को कंसोल में फेंकने के बजाय।
यान ताकुशेविच

6
@YanTakushevich आपको दोनों करने की जरूरत है। PropTypes को किसी भी तरह से उत्पादन के दौरान अक्षम किया जाना चाहिए, इसलिए आपको हमेशा यह सुनिश्चित करने के लिए मैन्युअल चेक की आवश्यकता होती है कि आपके उपयोगकर्ताओं को एक अच्छा अनुभव है। हालाँकि, PropTypes विकास के दौरान रन-टाइम चेतावनियों के लिए बहुत उपयोगी हो सकता है। यह सुनिश्चित करने के लिए कि आप कुछ भी न भूलें, यह सिर्फ एक अच्छा सुरक्षा जाल है।
ndbroadbent

27

मेरा मानना ​​है कि यहां चूक हुई बात यह है कि फ्लो एक स्टेटिक चेकर है, जबकि PropTypes एक रनटाइम चेकर है , जिसका मतलब है

  • प्रवाह कोडिंग करते समय त्रुटियों को ऊपर की ओर रोक सकता है: यह सैद्धांतिक रूप से कुछ त्रुटियों को याद कर सकता है जिनके बारे में आपको पता नहीं है (यदि आपने उदाहरण के लिए, या गहरी नेस्टेड वस्तुओं के मामले में अपनी परियोजना में प्रवाह को पर्याप्त रूप से लागू नहीं किया है)
  • PropTypes परीक्षण करते समय उन्हें नीचे की ओर पकड़ेगा, इसलिए यह कभी भी नहीं छूटेगा

1
यहाँ एक समर्पित बेबल प्लगइन है जो पहले से ही npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg

15

केवल प्रवाह का उपयोग करके सहारा के प्रकार की घोषणा करने का प्रयास करें। एक गलत प्रकार निर्दिष्ट करें, जैसे कि स्ट्रिंग के बजाय संख्या। आप देखेंगे कि यह कोड में फ़्लैग किया जाएगा जो आपके फ़्लो-अवेयर एडिटर के भीतर घटक का उपयोग करता है। हालाँकि, इससे कोई भी परीक्षण विफल नहीं होगा और आपका ऐप अभी भी काम करेगा।

अब एक गलत प्रकार के साथ React PropTypes का उपयोग जोड़ें। यह परीक्षण विफल हो जाएगा और ऐप चलाए जाने पर ब्राउज़र कंसोल में फ़्लैग किया जाएगा।

इसके आधार पर, ऐसा लगता है कि भले ही फ्लो का उपयोग किया जा रहा हो, PropTypes को भी निर्दिष्ट किया जाना चाहिए।


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

3
आपके आईडीई में त्रुटि का लाभ यह है कि आप परीक्षण चलाने से ठीक पहले इसे देखते हैं ।
टॉम फेनेच

बेल्ट और सस्पेंडर्स दृष्टिकोण के लिए प्लस 1।
डेविड ए। ग्रे।
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.