এইচটিএমএলে ডেটা-রিঅ্যাক্ট বৈশিষ্ট্য কী?

Question 1

আমি কয়েকটি পৃষ্ঠাগুলির এইচটিএমএল যাচ্ছিলাম, আমি লক্ষ্য করেছি যে তাদের মধ্যে কেউ এই "ডেটা-রিঅ্যাকটিড" জাতীয় বৈশিষ্ট্যটি ব্যবহার করে:

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

সেই বৈশিষ্ট্যটি কী এবং এর কাজ কী?

Question 2

data-reactidঅ্যাট্রিবিউট যাতে ব্যবহৃত একটি কাস্টম অ্যাট্রিবিউট প্রতিক্রিয়া স্বতন্ত্র DOM মধ্যে তার উপাদান চিহ্নিত করতে পারেন।

এটি গুরুত্বপূর্ণ কারণ প্রতিক্রিয়ার অ্যাপ্লিকেশনগুলি ক্লায়েন্টের পাশাপাশি সার্ভারেও রেন্ডার করা যেতে পারে । অভ্যন্তরীণভাবে প্রতিক্রিয়া আপনার অ্যাপ্লিকেশন তৈরি করে এমন ডিওএম নোডের জন্য উল্লেখগুলির উপস্থাপনা তৈরি করে (সরল সংস্করণ নীচে রয়েছে)।

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

সার্ভার এবং ক্লায়েন্টের মধ্যে প্রকৃত অবজেক্ট রেফারেন্স ভাগ করে নেওয়ার কোনও উপায় নেই এবং পুরো উপাদান গাছের ক্রমিক সংস্করণ পাঠানো সম্ভাব্য ব্যয়বহুল। অ্যাপ্লিকেশনটি সার্ভারে রেন্ডার করা হয় এবং ক্লায়েন্টে প্রতিক্রিয়া লোড করা হয়, কেবলমাত্র এটির ডেটা data-reactidবৈশিষ্ট্যগুলি are

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

এটি আবার উপরের ডেটা কাঠামোতে রূপান্তর করতে সক্ষম হওয়া প্রয়োজন। এটি যেভাবে এটি করে তা অনন্য data-reactidবৈশিষ্ট্য সহ। এটিকে উপাদান গাছকে স্ফীতকরণ বলা হয় ।

আপনি আরও খেয়াল করতে পারেন যে প্রতিক্রিয়া যদি ক্লায়েন্টের পক্ষ থেকে উপস্থাপন করে data-reactidতবে এটি উল্লেখটি ব্যবহার করে , যদিও এর উল্লেখগুলি হারাতে হবে না। কিছু ব্রাউজারগুলিতে এটি আপনার অ্যাপ্লিকেশনটি .innerHTMLডিওমে serোকায় তারপরে এটি পারফরম্যান্সের উত্সাহ হিসাবে সরাসরি উপাদান উপাদানটি স্ফীত করে।

অন্যান্য আকর্ষণীয় পার্থক্যটি হ'ল ক্লায়েন্ট-সাইড রেন্ডার করা রিঅ্যাক্ট আইডিগুলির একটি বর্ধিত পূর্ণসংখ্যার বিন্যাস থাকবে (যেমন .0.1.4.3), যেখানে সার্ভার-রেন্ডারগুলি একটি এলোমেলো স্ট্রিং (যেমন .loqi70ccu80.1.4.3) এর সাথে উপস্থাপিত হবে । এটি কারণ একাধিক সার্ভার জুড়ে অ্যাপ্লিকেশনটি রেন্ডার হতে পারে এবং এটি কোনও সংঘর্ষ না হওয়া গুরুত্বপূর্ণ। ক্লায়েন্টের পাশে, কেবলমাত্র একটি রেন্ডারিং প্রক্রিয়া রয়েছে, যার অর্থ অনন্য আইডিগুলি নিশ্চিত করতে কাউন্টারগুলি ব্যবহার করা যেতে পারে।

document.createElementপরিবর্তে 15 টি ব্যবহার করে প্রতিক্রিয়া জানান , তাই ক্লায়েন্টের রেন্ডারড মার্কআপে এই বৈশিষ্ট্যগুলিকে আর অন্তর্ভুক্ত করা হবে না।

Question 3

এটি একটি কাস্টম এইচটিএমএল বৈশিষ্ট্য তবে সম্ভবত এই ক্ষেত্রে ফেসবুক প্রতিক্রিয়া জেএস লাইব্রেরি ব্যবহার করে।

একবার দেখুন: http://facebook.github.io/react/

Question 4

এইচটিএমএল 5 এ কাস্টম ডেটা অ্যাট্রিবিউট

আমার উত্তরে আয়ানের মন্তব্য উদ্ধৃত করতে চাই:

এটি উপাদানটির কেবলমাত্র একটি বৈশিষ্ট্য (একটি বৈধতা) যা আপনি এটি সম্পর্কে ডেটা / তথ্য সঞ্চয় করতে ব্যবহার করতে পারেন।

এই কোডটি পরে ইভেন্ট হ্যান্ডলারে এটি পুনরুদ্ধার করে, এবং লক্ষ্য আউটপুট উপাদান খুঁজে পেতে এটি ব্যবহার করে। এটি কার্যকরভাবে ডিভের শ্রেণিটি সংরক্ষণ করে যেখানে এর পাঠ্য আউটপুট করা উচিত।

reactidশুধু একটি প্রত্যয় হয়, তাহলে আপনি যেকোনো নাম এখানে যেমন হতে পারে data-Ayman।

আপনি যদি পার্থক্যটি সন্ধান করতে চান তবে এই এসও উত্তর এবং মন্তব্যে ফিডলগুলি দেখুন ।

Question 5

ডেটা অ্যাট্রিবিউটগুলি সাধারণত বিভিন্ন মিথস্ক্রিয়া জন্য ব্যবহৃত হয়। সাধারণত জাভাস্ক্রিপ্ট মাধ্যমে। তারা সাইটের আচরণ সম্পর্কিত কোনও কিছুকে প্রভাবিত করে না এবং যা প্রয়োজন তার জন্য ডেটা পাস করার জন্য একটি সুবিধাজনক পদ্ধতি হিসাবে দাঁড়ায়। এখানে একটি নিবন্ধ যা জিনিসগুলি পরিষ্কার করতে পারে:

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

আপনি data-যে কোনও স্ট্যান্ডার্ড অ্যাট্রিবিউট সেফ স্ট্রিংয়ের (পূর্বের স্থান বা বিশেষ অক্ষরগুলি সহ বর্ণানুক্রমিক) উপসর্গ রেখে ডেটা অ্যাট্রিবিউট তৈরি করতে পারেন । উদাহরণস্বরূপ, data-idবা এই ক্ষেত্রেdata-reactid

Question 6

এটি এইচটিএমএল ডেটা অ্যাট্রিবিউট। আরও বিশদে এটি দেখতে: http://html5doctor.com/html5-custom-data-attributes/

মূলত এটি এখনও HTML বৈধ করার সময় এটি আপনার কাস্টম ডেটার একটি ধারক। এটি data-প্লাস কিছু অনন্য সনাক্তকারী।