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

  1. मानक प्रोप ड्रिलिंग
Pros: easy
Cons: will become unmanageable in complex feature
  1. React.Context का उपयोग करना
Pros: medium difficulty, naturally separate from main component
Cons: more time to write, may be unnecessary for smaller components, will do re renders that will cause performance issues headaches in, for example, large forms.
  1. 'reactn' मॉड्यूल से वैश्विक स्थिति का उपयोग करना
Pros: easy
Cons: will get unmanageable for large projects that have tons of components, cannot prevent rerender AFAIK.
  1. Redux का उपयोग करना
Pros: robust and compatible with firebase (react-redux-firebase, redux-firestore), can prevent rerender using areStatesEqual,
Cons: more boilerplates, more work to do for simpler state management

क्या ऐसा करने पर मानक प्रथाओं पर कोई दिशानिर्देश है? आप लोग मध्यम-बड़ी परियोजनाओं के लिए क्या उपयोग करते हैं? धन्यवाद!

0
James Gunawan 3 सितंबर 2020, 06:47

2 जवाब

सबसे बढ़िया उत्तर

The following answer is subjective!

मूल रूप से 3 श्रेणियां हैं जिनसे मैं अवगत हूं।

  1. सब कुछ स्थानीय रखें (ऐप के किसी भी आकार के लिए जो भाई निर्भरता से निपटता नहीं है, यह ठीक काम करेगा। कुछ प्रोप ड्रिलिंग का कारण बन सकता है, हालांकि इसे जितना संभव हो टाला जाना चाहिए, यह एक विरोधी पैटर्न नहीं है। आप संभालने के लिए बेहतर दृष्टिकोण के साथ आते हैं यह यानी PureComponent, React.memo, shouldComponentUpdate)
  2. सब कुछ वैश्विक रखें(redux/reactN/...) (मेरे अनुभव में इस दृष्टिकोण को नहीं देखा है, मेरी राय में अनुशंसित नहीं है क्योंकि आपको हर बार केंद्रीय राज्य को हिट करने की आवश्यकता होती है जब कोई परिवर्तन)
  3. दोनों का मिश्रण रखें। (मध्यम से बड़े पैमाने की परियोजनाओं में इसे अत्यधिक देखा गया है, हम इस दृष्टिकोण का उपयोग redux के साथ करते हैं)

एक विकल्प चुनना:

  1. व्यक्तिगत रूप से, आवेदन के आकार के बावजूद कोई भी पहले दृष्टिकोण से शुरू कर सकता है और बाद में आवश्यकता पड़ने पर केंद्रीय राज्य जोड़ सकता है (यदि आप सुनिश्चित नहीं हैं कि राज्यों को कहां रखा जाए)।

  2. यदि आपको शुरू से ही कुछ राज्यों को केंद्रीय रूप से प्रबंधित करने की आवश्यकता है, तो इसे शुरू से जोड़ा जा सकता है (यदि राज्यों को स्पष्ट रूप से परिभाषित किया गया है)।

यदि आप ऊपर दिए गए दो तरीकों में से किसी एक को चुनते हैं, तो शुरुआत के लिए, एक समय में आपको यह तय करना होगा कि या तो प्रथम-पक्ष यानी React Context या किसी तीसरे पक्ष यानी Redux, ... के लिए जाएं।

आपने इनमें से पेशेवरों और विपक्षों को पहले ही बता दिया है, आप तुलना कर सकते हैं और देख सकते हैं कि कौन सा दूसरों से अधिक है।

0
Pramod Mali 3 सितंबर 2020, 07:21

आपके द्वारा प्रदान की गई सूची से एक सरल उत्तर के लिए मैं रेडक्स का सुझाव दूंगा, लेखन क्रियाएं और रेड्यूसर एक निश्चित मात्रा में ओवरहेड जोड़ता है, और प्रतिक्रिया के रूप में विकसित और परिपक्व होने पर ऐसा लगता है कि आप रेडक्स के उपयोग के साथ बड़े अनुप्रयोगों का प्रबंधन कर सकते हैं: https://medium.com/@dan_abramov/you-might-not- ज़रूरत-रेडक्स-बी46360cf367. लेकिन एक बार जब आप रेडक्स कैसे काम करते हैं, तो आप आसानी से स्केल कर पाएंगे। यह प्रतिक्रिया-रिडक्स शुरुआती-मध्यवर्ती स्तर के देवों के लिए एक अच्छा समाधान है।

मेरे पास आपके लिए सबसे अच्छा सुझाव है कि आप केवल प्रतिक्रिया का उपयोग करें। useContext और useReducer आपको बहुत आगे ले जाएगा, लेकिन इसके लिए एक मध्यवर्ती - अनुभवी विकास कौशल की आवश्यकता होती है। यह दृष्टिकोण आपको डेटा-संरचना, घटकों के एनकैप्सुलेशन और अग्रिम प्रतिक्रिया पैटर्न के उपयोग में समय लगाने के लिए मजबूर करेगा। (मैं https://kentcdodds.com/workshops/advanced-react-patterns जैसी किसी चीज़ में नामांकन करूंगा)

0
Eran 3 सितंबर 2020, 09:12