Вопрос по html, javascript, reactjs – что такое атрибут data-реактид в html?

87

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

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

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

data-reactid это пользовательский атрибут, используемыйРеагировать на библиотеку JavaScript, Который разработан для использования с Facebook и Instagram. amit
Обратите внимание, что все ответы объясняют, что такое пользовательские атрибуты даты, а не объясняют, что такое реакция данных. Он используется реагировать, чтобы иметь возможность ссылаться на объект DOM с экземпляром класса реагирующего элемента. adrianj98
Интересно, если Facebook использует React, почему я не нахожу никакой информации о данных на их сайте? PabloRosales
@ adrianj98, почему вы не опубликовали свой комментарий вместо ответа? Octopus

Ваш Ответ

5   ответов
122

data-reactid Атрибут является настраиваемым атрибутом, который используется дляреагировать может однозначно идентифицировать его компоненты в 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). Это связано с тем, что приложение может отображаться на нескольких серверах, и важно, чтобы не было коллизий. На стороне клиента существует только один процесс рендеринга, что означает, что счетчики могут использоваться для обеспечения уникальных идентификаторов.

Реакция 15 использованияdocument.createElement вместо, так что визуализированная клиентская разметка больше не будет включать эти атрибуты

Это должен быть принятый ответ, поскольку он единственный, который отвечает на вопрос. John
Огромный +1 к обновлению на React 15. Ethan Mick
@RationalDev Ах, это интересно. Как обойти проблему коллизий, если приложение отображается на нескольких серверах? Dan Prince
для React v15 +:> data-activtid по-прежнему присутствует для содержимого, отображаемого на сервере, однако оно намного меньше, чем раньше, и является просто автоматически увеличивающимся счетчиком. RationalDev
я искал этот последний раздел, спасибо за добавление этого. Я был озадачен, почему моя разметка клиента не включала ее так, как раньше, но у другой части моего приложения она была (она отображалась на сервере). jacoballenwood
3

http://html5doctor.com/html5-custom-data-attributes/

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

11

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

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

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

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

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

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

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

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

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

3

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

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

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

Похожие вопросы