какой атрибут 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/

Атрибут Custom Data в 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-плюс некоторые уникальный идентификатор.