html में data-reactid विशेषता क्या है?

Question 1

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

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

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

Question 2

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

यह महत्वपूर्ण है क्योंकि रिएक्ट एप्लिकेशन को सर्वर के साथ-साथ क्लाइंट में भी प्रस्तुत किया जा सकता है । आंतरिक रूप से प्रतिक्रिया डोम नोड्स के संदर्भ का प्रतिनिधित्व करती है जो आपके आवेदन को बनाते हैं (सरलीकृत संस्करण नीचे है)।

{
  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विशेषता का उपयोग करता है , भले ही इसके संदर्भों को खोने की आवश्यकता न हो। कुछ ब्राउज़रों में, यह आपके एप्लिकेशन को DOM में सम्मिलित करता है, .innerHTMLफिर यह एक प्रदर्शन को बढ़ावा देने के रूप में सीधे कंपोनेंट ट्री को फुला देता है।

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

15 केdocument.createElement बजाय प्रतिक्रिया का उपयोग करता है , इसलिए क्लाइंट प्रदान किए गए मार्कअप में ये विशेषताएँ शामिल नहीं होंगी।

Question 3

यह एक कस्टम html विशेषता है, लेकिन शायद इस मामले में इसका उपयोग Facebook React JS Library द्वारा किया जाता है।

देखिए: http://facebook.github.io/react/

Question 4

HTML5 में कस्टम डेटा विशेषता

मेरे जवाब में इयान की टिप्पणी को उद्धृत करना चाहेंगे:

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

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

reactidसिर्फ एक प्रत्यय है, आप यहाँ कोई भी नाम रख सकते हैं जैसे data-Ayman:।

यदि आप इस एसओ उत्तर और टिप्पणी में फ़िडल्स की जाँच करना चाहते हैं ।

Question 5

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

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

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

Question 6

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

मूल रूप से यह अभी भी HTML को वैध बनाते हुए आपके कस्टम डेटा का एक कंटेनर है। यह data-प्लस कुछ विशिष्ट पहचानकर्ता है।