it-swarm.dev

ما هي سمة البيانات التي تتفاعل في لغة تأشير النص الفائق؟

بينما كنت أتصفح HTML لبعض الصفحات ، لاحظت أن بعضها يستخدم هذه السمة "تفاعل البيانات" مثل:

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

ما هي هذه السمة وما هي وظيفتها؟

87
Ayman El Temsahi

السمة data-reactid هي سمة مخصصة تستخدم بحيث يمكن لـ React تحديد مكوناتها بشكل فريد داخل DOM.

هذا مهم لأن تطبيقات React يمكن تقديمها على الخادم وكذلك العميل. Reactally React يُنشئ تمثيلًا للمراجع إلى عقد DOM التي تشكل التطبيق الخاص بك (الإصدار المبسط أدناه).

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

لا توجد طريقة لمشاركة مراجع الكائن الفعلية بين الخادم والعميل ، ومن المحتمل أن يكون إرسال نسخة متسلسلة من شجرة المكون بالكامل باهظ التكلفة. عندما يتم تقديم التطبيق على الخادم ويتم تحميل React على العميل ، فإن البيانات الوحيدة التي لديه هي سمات data-reactid.

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

يجب أن تكون قادرًا على تحويل ذلك مرة أخرى إلى بنية البيانات أعلاه. الطريقة التي يتم بها ذلك هي مع السمات الفريدة data-reactid. يسمى هذا {تضخيم شجرة المكون.

قد تلاحظ أيضًا أنه في حالة تقديم React من جانب العميل ، فإنه يستخدم السمة data-reactid ، على الرغم من أنه لا يحتاج إلى فقد مراجعه. في بعض المتصفحات ، يقوم بإدراج التطبيق الخاص بك في DOM باستخدام .innerHTML ثم يقوم بتضخيم شجرة المكون على الفور ، كدعم للأداء.

الاختلاف الآخر المثير للاهتمام هو أن معرفات React المقدمة من جانب العميل سيكون لها تنسيق عدد صحيح تدريجي (مثل .0.1.4.3) ، في حين أن البادئات التي يتم تقديمها من الخادم سيتم بادئة بسلسلة عشوائية (مثل .loqi70ccu80.1.4.3). هذا لأنه قد يتم تقديم التطبيق عبر خوادم متعددة ومن المهم عدم وجود تصادمات. في جانب العميل ، هناك عملية تقديم واحدة فقط ، مما يعني أنه يمكن استخدام العدادات لضمان معرفات فريدة.

React 15 يستخدم document.createElement بدلاً من ذلك ، لذلك لن تتضمن العلامات المقدمة من العميل هذه السمات بعد الآن.

122
Dan Prince

إنها سمة html مخصصة ، لكن في هذه الحالة على الأرجح تستخدم مكتبة Facebook React JS.

ألقِ نظرة: http://facebook.github.io/react/

35
Samuel G. P.

سمة البيانات المخصصة في HTML5

أود أن أقتبس تعليق إيان في إجابتي:

إنها مجرد سمة (صالحة) على العنصر الذي يمكنك استخدامه لتخزين البيانات/المعلومات المتعلقة بها.

ثم يقوم هذا الرمز باسترداده لاحقًا في معالج الأحداث ، ويستخدمه للعثور على عنصر الإخراج الهدف. إنه يخزن فئة div بشكل فعال حيث يجب إخراج نصها.

reactid مجرد لاحقة ، يمكنك الحصول على أي اسم هنا على سبيل المثال: data-Ayman.

إذا كنت ترغب في العثور على الفرق تحقق من الكمانات في هذا SO الإجابة والتعليق .

11
Praveen

تستخدم سمات البيانات بشكل شائع لمجموعة متنوعة من التفاعلات. عادة عبر جافا سكريبت. لا تؤثر على أي شيء يتعلق بسلوك الموقع وتقف كوسيلة ملائمة لتمرير البيانات لأي غرض مطلوب. إليك مقالة قد توضح الأمور:

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

يمكنك إنشاء سمة بيانات عن طريق بادئة data- إلى أي سلسلة آمنة للسمة القياسية (أبجدية رقمية بدون مسافات أو أحرف خاصة). على سبيل المثال ، data-id أو في هذه الحالة data-reactid

3
Kai Qing

هذه هي سمة بيانات HTML. انظر هذا لمزيد من التفاصيل: http://html5doctor.com/html5-custom-data-attributes/

إنها في الأساس مجرد حاوية من البيانات المخصصة الخاصة بك مع الاستمرار في جعل HTML صالحًا. إنه data- بالإضافة إلى بعض المعرفات الفريدة.

3
Ben Gulapa