React: "Props.children" के बारे में प्रश्न

को निर्मित 26 मई 2018 · 6टिप्पणियाँ · स्रोत: facebook/react

क्या आप किसी सुविधा का अनुरोध करना चाहते बग की रिपोर्ट करना चाहते हैं?
बस सवाल

Props.children के बारे में कुछ प्रश्न

React.Children के आधिकारिक प्रतिक्रिया प्रलेखन में आप पढ़ सकते हैं कि this.props.children एक "अपारदर्शी डेटा संरचना" है।
इसका सबसे सही मतलब क्या है?

मुझे लगता है कि props.children की डेटा संरचना की पारदर्शिता के लिए सामान्य रूप से तीन संभावनाएँ हैं:

केस 1: `props.children` डेटा संरचना का हर पहलू खुला और अच्छी तरह से परिभाषित है।

यदि यह सही था, तो "अपारदर्शी डेटा संरचना" शब्द पूरी तरह से गलत होगा।
इसलिए "केस 1" जाहिर तौर पर ऐसा नहीं है।

केस 2: `props.children` डेटा संरचना का कोई पहलू खुला या स्पष्ट नहीं है।

इसका मतलब यह होगा कि जब भी आप props.children का उपयोग करते हैं, तो आप React.Children React.Children साथ संयोजन में इसका उपयोग करने के लिए केवल एक ही है (एमएमएमएच, क्या यह वास्तव में केवल एक है?) जो props.children की वास्तविक डेटा संरचना के बारे में जानता है।

लेकिन इसका मतलब यह होगा कि इसे न तो उपयोग करने की अनुमति दी जानी चाहिए

javascript // This is used almost everywhere (even in the official React documentation) <div>{this.props.children}</div>

न

javascript // This is often seen with the "Function as child" pattern MyComponent.propTypes = { children: PropTypes.func.isRequired, };

जैसा कि दोनों उदाहरण बहुत आम हैं, ऐसा लगता है कि "केस 2" स्पष्ट रूप से भी मामला नहीं है।

केस 3: `props.children` डेटा संरचना के कुछ पहलू खुले और अच्छी तरह से परिभाषित हैं।

यह संभावना को खोल देगा कि "केस 2" में एक या दोनों उदाहरण मान्य हैं।
लेकिन तब इसका मतलब होगा कि एक सटीक विनिर्देश होना चाहिए कि props.children कौन से पहलू अच्छी तरह से और खुले तौर पर परिभाषित हैं और कौन से पहलू वास्तव में अपारदर्शी हैं।
हो सकता है कि मैंने रिएक्ट डॉक्यूमेंटेशन में कुछ याद किया हो, लेकिन मुझे लगता है कि यह वास्तव में बिल्कुल निर्दिष्ट नहीं है, क्या यह है?

और आखिरी लेकिन कम से कम एक और सवाल नहीं:

वास्तव में props.children क्यों नहीं है क्योंकि कुछ बच्चे (एक अयस्क अधिक) बस हमेशा एक सरणी होते हैं (जैसा कि उदाहरण के लिए "प्रीक्ट" में किया जाता है)? इससे चीजें इतनी आसान हो जाएंगी, नहीं?

स्पष्टीकरण के लिए अग्रिम धन्यवाद।

Question

स्रोत

mcjazzyfunky

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

_Oqueque डेटा संरचना_ इस तथ्य को संदर्भित करता है कि children बहुत सी चीजें हो सकती हैं: Arrays, टुकड़े, एकल तत्व, स्ट्रिंग शाब्दिक, आदि।

_React.Children_ में कुछ विधियाँ हैं जो आपको children _in को एक एकीकृत तरीके से काम करने की अनुमति देती हैं, और निश्चित रूप से उनके साथ बातचीत करने का एकमात्र तरीका नहीं है।

वास्तव में प्रॉपर क्यों नहीं है। बच्चों के मामले में कुछ बच्चे हैं (एक अयस्क अधिक) बस हमेशा एक सरणी (उदाहरण के लिए "प्रीक्ट" में किया जाता है)?

इस तथ्य के अलावा कि यह JSX में शॉर्टहैंड है, children किसी भी अन्य की तरह एक संपत्ति है। वास्तव में, आप इसे इस प्रकार निर्दिष्ट कर सकते हैं:

<Component children={...}/>

जब प्रतिक्रिया को DOM को अपडेट करने की आवश्यकता होती है, तो यह बताना अधिक महंगा होगा कि क्या दो एकल-आइटम सरणियाँ समान हैं कि क्या दो आदिम मान (जैसे स्ट्रिंग्स) समान हैं।

ऐसा कहा जा रहा है, मुझे लगता है कि React.Children प्रलेखन को थोड़ा विस्तारित किया जा सकता है, लेकिन यह एक समस्या है प्रतिक्रिया करने के लिए लॉग इन करने के लिए

यह लेख चीजों को थोड़ा स्पष्ट कर सकता है, यह मेरे लिए था!

danburzo 28 मई 2018

👍4

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

वास्तव में प्रॉपर क्यों नहीं है। बच्चों के मामले में कुछ बच्चे हैं (एक अयस्क अधिक) बस हमेशा एक सरणी (उदाहरण के लिए "प्रीक्ट" में किया जाता है)?

<Component children={...}/>

यह लेख चीजों को थोड़ा स्पष्ट कर सकता है, यह मेरे लिए था!

danburzo 28 मई 2018

👍4

आपके उत्तर और स्पष्टीकरण के लिए बहुत धन्यवाद @danburzo ।
आपके उत्तर के बाद, यह स्पष्ट है कि मैंने "अपारदर्शी" शब्द का पूरी तरह से गलत अर्थ निकाला है।
रिएक्ट प्रलेखन केवल यह कहना चाहता था कि props.children की डेटा संरचना पूरी तरह से अच्छी तरह से परिभाषित संघ प्रकार है और यह इसके ठोस प्रतिनिधित्व में भिन्न होती है (जैसा कि यूनियन प्रकार हमेशा करते हैं)।

मुझे बस एक पुराना मुद्दा मिला है जो बिल्कुल उसी विषय को संबोधित करता है - आश्चर्य है कि उन परिवर्तनों से क्या खुशी मिलती है।? (मैंने reactjs.org => reactjs / reactjs.org # 914 पर एक मुद्दा खोला है):

https://github.com/facebook/react/pull/6018/files/91223423410f107ff83a8a6ce3158c488247292f?short_path=ef171787#diff -ef51787305cfed62f564284747d4d4de

फिर भी मैं दूसरा प्रश्न फिर से पूछना चाहूंगा:
"Props.children" क्यों नहीं एक सरणी है कि वास्तव में एक बच्चा है (यह वास्तव में कम से कम विस्मय के सिद्धांत के खिलाफ उल्लंघन लगता है यदि आप पृष्ठभूमि को नहीं जानते हैं => यदि नाम "बच्चे" या "आइटम" हैं या "टोकन" आप आम तौर पर एक संग्रह की उम्मीद करते हैं)?
क्या यह वास्तव में प्रदर्शन कारणों से है? मैं वास्तव में नहीं देख सकता कि नीचे "checkResult" की गणना उस समय की खपत है:

const
  child1 = ...,
  child2 = ...,
  child1IsArray = Array.isArray(child1),
  child2IsArray = Array.isArray(child2),

  checkResult = child1IsArray && child2IsArray
     && child1.length === 1 && child2.length === 1
     && child1[0] === child2[0];

क्षमा करें, अगर पूछना फिर से थोड़ा कष्टप्रद लगता है - लेकिन मैं वास्तव में उस डिज़ाइन निर्णय के सही कारण को जानना पसंद करूंगा ...।

mcjazzyfunky 28 मई 2018

👍1

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

danburzo 29 मई 2018

@danburzo आपके उत्तर के लिए फिर से धन्यवाद।

Mhh, स्पष्ट रूप से मुझे उम्मीद थी कि शायद रिएक्ट टीम के किसी व्यक्ति को उस डिज़ाइन के निर्णय का वास्तविक कारण याद होगा ...
क्योंकि वास्तव में कुछ सूक्ष्म मुद्दे हैं जो बच्चों को रिएक्ट में संभाल रहे हैं।
उदाहरण के लिए, एक प्रतिक्रिया नौसिखिया से पूछें कि क्या निम्नलिखित उदाहरण में Test1 और Test2 के घटक समान व्यवहार करते हैं (आप - एक प्रतिक्रिया समर्थक के रूप में - जानते हैं कि उत्तर "नहीं" => Test2 DE1 पर चेतावनी देगा कि गुम हुई कुंजियों के बारे में Test1 होगा नहीं - लेकिन क्या यह वास्तव में है अगर आप एक नौसिखिया थे?

const
  h = React.createElement,
  Test1 = () => h('div', null, h('br'), h('br')),
  Test2 = () => h('div', { children: [h('br'), h('br')] });

ReactDOM.render(
  h('div', null, h(Test1), h(Test2)),
  document.getElementById('container')
);

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

एक और उदाहरण: एक प्रतिक्रिया से पूछो नौसिखिया क्या "बच्चों: PropTypes ...." ऐसा लगेगा जैसे कि आवश्यकता यह है कि सभी बच्चों को एक निश्चित स्थिति को संतुष्ट करना चाहिए। मुझे लगता है कि जवाब देना आसान नहीं होगा (कम से कम नौसिखिया के लिए)।

रिएक्ट टीम को: यदि प्रश्न में डिज़ाइन निर्णय के कारणों का वास्तव में पता नहीं है या शायद स्वाद का मामला था, तो निश्चित रूप से, इस मुद्दे को बंद करने के लिए स्वतंत्र महसूस करें।

mcjazzyfunky 29 मई 2018

मुझे लगता है कि एक बच्चे के लिए एक सरणी का उपयोग न करने का निर्णय अनावश्यक सरणी आवंटन से बचने के लिए किया गया था।

क्योंकि वास्तव में कुछ सूक्ष्म मुद्दे हैं जो बच्चों को रिएक्ट में संभाल रहे हैं।

हम आम तौर पर एक स्पष्ट children प्रोप का उपयोग करने की अनुशंसा नहीं करते हैं। अधिकांश उपयोगकर्ता सीधे React.createElement कॉल करने के बजाय JSX का उपयोग करते हैं, इसलिए आपके द्वारा बताए गए मुद्दे आमतौर पर एक समस्या नहीं हैं।

aweary 24 जून 2018

@aweary आपके उत्तर के लिए धन्यवाद

mcjazzyfunky 24 जून 2018

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

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

React: "Props.children" के बारे में प्रश्न

Props.children के बारे में कुछ प्रश्न

केस 1: props.children डेटा संरचना का हर पहलू खुला और अच्छी तरह से परिभाषित है।

केस 2: props.children डेटा संरचना का कोई पहलू खुला या स्पष्ट नहीं है।

केस 3: props.children डेटा संरचना के कुछ पहलू खुले और अच्छी तरह से परिभाषित हैं।