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


94

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

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

Что это за атрибут и какова его функция?


30
data-reactid- настраиваемый атрибут, используемый библиотекой React JavaScript . Который разработан для использования с Facebook и Instagram.
amit

7
Обратите внимание, что все ответы объясняют, что такое настраиваемые атрибуты даты, а не объясняют, что такое data-reactid. Он используется response, чтобы иметь возможность ссылаться на объект dom с экземпляром класса элемента react.
adrianj98

2
@ adrianj98, почему вы вместо этого не разместили свой комментарий в качестве ответа?
Octopus

3
Интересно, если Facebook использует React, почему я не нахожу на их сайте никаких данных?
PabloRosales

Ответы:


132

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


3
Это должен быть принятый ответ, поскольку он единственный, который отвечает на вопрос.
Джон


2
для React v15 +:> data-reactid все еще присутствует для содержимого, отображаемого на сервере, однако он намного меньше, чем раньше, и представляет собой просто автоматически увеличивающийся счетчик.
RationalDev нравится GoFundMonica

1
@RationalDev А, это интересно. Как решить проблему столкновения, если приложение отображается на нескольких серверах?
Дэн Принс

1
Я искал последний раздел, спасибо, что добавили его. Я был сбит с толку, почему моя разметка клиента не включала его, как раньше, но в другой части моего приложения он был (он был отрисован на сервере).
jacoballenwood


11

Атрибут Custom Data в HTML5

Хочу процитировать комментарий Яна в своем ответе:

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

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

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

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


8
обратите внимание, что вы не можете использовать прописные буквы в имени атрибута в соответствии с предоставленной вами ссылкой.
Lez

1
Да, это ограничение вводит в заблуждение. Фактическое имя атрибута в самой DOM не может содержать прописные буквы, но атрибут, записанный в теге HTML, может, потому что все имена тегов и атрибутов автоматически переводятся в нижний регистр, поскольку они все равно читаются. Итак, в HTML вы можете использовать прописные буквы, но в JS все будет в нижнем регистре. w3.org/TR/2010/WD-html5-20101019/…
Peeja

3

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

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

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.