що таке атрибут data-reactid у html?

Переглядаючи HTML деяких сторінок, я помітив, що деякі з них використовують цей атрибут "data-reactid", як:

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

Що це за атрибут і яка його функція?

data-reactidАтрибут є призначеним для користувача атрибутом , використовуваним таким чином , що React може однозначно ідентифікувати його компоненти в DOM.

Це важливо, оскільки програми React можуть бути відображатися як на сервері, так і на клієнті. Внутрішньо 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). Це пов’язано з тим, що програма може відображатися на декількох серверах, і важливо, щоб не було зіткнень. На стороні клієнта існує лише один процес візуалізації, що означає, що лічильники можуть використовуватися для забезпечення унікальних ідентифікаторів.

document.createElementНатомість використовує React 15 , тому розмічена клієнтом розмітка більше не буде включати ці атрибути.

Це власний атрибут html, але, мабуть, у цьому випадку він використовується бібліотекою Facebook React JS.

Погляньте: http://facebook.github.io/react/

Атрибут власних даних у HTML5

Я хотів би процитувати коментар Яна у своїй відповіді:

Це просто атрибут (дійсний) елемента, який ви можете використовувати для зберігання даних / інформації про нього.

Потім цей код отримує його пізніше в обробнику подій і використовує для пошуку цільового вихідного елемента. Він ефективно зберігає клас div, куди слід виводити його текст.

reactidце просто суфікс, ви можете мати будь-яке ім'я тут , наприклад: data-Ayman.

Якщо ви хочете знайти різницю, перевірте скрипки у цій SO відповіді та коментарі .

атрибути даних зазвичай використовуються для різноманітних взаємодій. Зазвичай через javascript. Вони не впливають ні на що, що стосується поведінки сайту, і є зручним методом передачі даних з будь-якою необхідною метою. Ось стаття, яка може прояснити ситуацію:

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

Ви можете створити атрибут даних, додавши data-до будь-якого стандартного атрибута безпечний рядок (буквено-цифровий без пробілів або спеціальних символів). Наприклад, data-idабо в цьому випадкуdata-reactid

Це атрибут даних HTML. Докладніше див. Це: http://html5doctor.com/html5-custom-data-attributes/

В основному це просто контейнер ваших користувацьких даних, і при цьому HTML-код залишається дійсним. Це data-плюс якийсь унікальний ідентифікатор.