Какой атрибут data-reactid в html?

Ответ 1

Атрибут data-reactid - это настраиваемый атрибут, используемый React, который может однозначно идентифицировать его компоненты в DOM.

Это важно, потому что приложения React могут быть отображены на сервере, а также клиентом. Internall 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, поэтому клиентская разметка не будет включать эти атрибуты.

Ответ 2

Это настраиваемый атрибут html, но, вероятно, в этом случае используется библиотекой Facebook React JS.

Посмотрите: http://facebook.github.io/react/

Ответ 3

Пользовательский атрибут данных в HTML5

Хотелось бы привести комментарий Яна в своем ответе:

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

Этот код затем извлекает его позже в обработчике событий и использует его для найдите целевой выходной элемент. Он эффективно сохраняет класс div, где должен выводиться текст.

reactid - это просто суффикс, вы можете указать любое имя здесь: data-Ayman.

Если вы хотите найти разницу, проверьте скрипты в этом SO ответ и комментарий.

Ответ 4

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

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

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

Ответ 5

Это атрибут данных HTML. См. Это более подробно: http://html5doctor.com/html5-custom-data-attributes/

В основном это просто контейнер ваших пользовательских данных, но все же делает HTML действительным. Он data- плюс некоторый уникальный идентификатор.