एचटीएमएल में डेटा-प्रतिक्रियात्मक विशेषता क्या है?

Question

जब मैं कुछ पृष्ठों के HTML के माध्यम से जा रहा था, मैंने देखा है कि उनमें से कुछ इस विशेषता "डेटा-reactid" की तरह का उपयोग करें:

<a data-reactid="......" ></a> 

उस विशेषता क्या है और अपने कार्य क्या है?

Answer 1

data-reactid विशेषता एक कस्टम ताकि React विशिष्ट डोम के भीतर उसके घटकों की पहचान कर सकते हैं इस्तेमाल किया विशेषता है।

यह महत्वपूर्ण है क्योंकि प्रतिक्रिया अनुप्रयोग rendered at the server के साथ-साथ ग्राहक भी हो सकते हैं। आंतरिक रूप से प्रतिक्रिया आपके आवेदन को बनाने वाले डीओएम नोड्स के संदर्भों का प्रतिनिधित्व करता है (सरलीकृत संस्करण नीचे है)।

{ 
    id: '.1oqi7occu80', 
    node: DivRef, 
    children: [ 
    { 
     id: '.1oqi7occu80.0', 
     node: SpanRef, 
     children: [ 
     { 
      id: '.1oqi7occu80.0.0', 
      node: InputRef, 
      children: [] 
     } 
     ] 
    } 
    ] 
} 

सर्वर और ग्राहक और पूरे घटक पेड़ की एक धारावाहिक संस्करण भेजने के संभावित महंगा है के बीच वास्तविक वस्तु संदर्भ साझा करने के लिए कोई तरीका नहीं है।जब सर्वर पर एप्लिकेशन प्रस्तुत किया जाता है और क्लाइंट पर प्रतिक्रिया लोड होती है, तो उसके पास केवल एक ही डेटा data-reactid विशेषताएँ होती है।

<div data-reactid='.loqi70ccu80'> 
    <span data-reactid='.loqi70ccu80.0'> 
    <input data-reactid='.loqi70ccu80.0' /> 
    </span> 
</div> 

इसे वापस डेटा संरचना में परिवर्तित करने में सक्षम होना चाहिए। जिस तरह से यह अद्वितीय data-reactid विशेषताओं के साथ है। इसे घटक पेड़ को फुलाया जाता है।

आप यह भी देख सकते हैं कि यदि ग्राहक पक्ष में प्रतिक्रिया प्रस्तुत करता है, तो यह data-reactid विशेषता का उपयोग करता है, भले ही इसे इसके संदर्भ खोने की आवश्यकता न हो। कुछ ब्राउज़रों में यह आपके एप्लिकेशन को .innerHTML का उपयोग करके डीओएम में डालता है, फिर यह प्रदर्शन बूस्ट के रूप में सीधे घटक पेड़ को फुलाता है।

अन्य रोचक अंतर यह है कि ग्राहक के पक्ष में प्रदान की गई प्रतिक्रिया आईडी एक वृद्धिशील पूर्णांक प्रारूप होगा (जैसे .0.1.4.3), सर्वर गाया वाले एक यादृच्छिक स्ट्रिंग (जैसे .loqi70ccu80.1.4.3 के रूप में) के साथ उपसर्ग किया जाएगा, जबकि। ऐसा इसलिए है क्योंकि एप्लिकेशन को एकाधिक सर्वरों में प्रस्तुत किया जा सकता है और यह महत्वपूर्ण है कि कोई टकराव न हो। ग्राहक पक्ष में केवल एक प्रतिपादन प्रक्रिया होती है, जिसका अर्थ है कि अद्वितीय आईडी सुनिश्चित करने के लिए काउंटर का उपयोग किया जा सकता है।

React 15 uses document.createElement instead, इसलिए ग्राहक द्वारा प्रदान किए गए मार्कअप में इन विशेषताओं को और शामिल नहीं किया जाएगा।

Answer 2

डेटा विशेषताओं का उपयोग आमतौर पर विभिन्न प्रकार के इंटरैक्शन के लिए किया जाता है। आम तौर पर जावास्क्रिप्ट के माध्यम से। वे साइट व्यवहार के संबंध में कुछ भी प्रभावित नहीं करते हैं और किसी भी उद्देश्य के लिए डेटा पास करने के लिए एक सुविधाजनक विधि के रूप में खड़े हैं।

http://ejohn.org/blog/html-5-data-attributes/

आप किसी भी मानक विशेषता सुरक्षित स्ट्रिंग (कोई रिक्ति या विशेष वर्ण के साथ अल्फान्यूमेरिक) को data- लगाकर द्वारा एक डेटा विशेषता बना सकते हैं: यहाँ एक लेख बातें स्पष्ट सकता है। उदाहरण के लिए, data-id के लिए या इस मामले में data-reactid

Answer 3

एचटीएमएल 5 में Custom Data attribute

मेरा उत्तर में इयान की टिप्पणी को उद्धृत करना चाहते हैं: (एक वैध एक) तत्व पर

यह सिर्फ एक विशेषता कि आप इसके बारे में डेटा/जानकारी स्टोर करने के लिए का उपयोग कर सकते हैं।

यह कोड बाद में ईवेंट हैंडलर में इसे पुनर्प्राप्त करता है, और इसे पर लक्षित आउटपुट तत्व ढूंढता है। यह प्रभावी रूप से div की कक्षा को संग्रहीत करता है जहां इसका टेक्स्ट आउटपुट किया जाना चाहिए।

reactid सिर्फ एक प्रत्यय है, आप यहां कोई नाम हो सकते हैं उदाहरण: data-Ayman।

यदि आप अंतर को देखना चाहते हैं तो इस SO answer and comment में फ़िडल्स की जांच करें।

Answer 4

यह HTML डेटा विशेषता है। अधिक विस्तार के लिए देखें: http://html5doctor.com/html5-custom-data-attributes/

असल में यह सिर्फ अपनी कस्टम डेटा की एक कंटेनर है, जबकि अभी भी HTML वैध बना रही है। यह data- प्लस कुछ अद्वितीय पहचानकर्ता है।

Answer 5

यह एक कस्टम एचटीएमएल विशेषता है लेकिन शायद इस मामले में फेसबुक रिएक्ट जेएस लाइब्रेरी द्वारा उपयोग किया जाता है।

एक नज़र डालें: http://facebook.github.io/react/