it-swarm.com.ru

что такое атрибут data-реактид в html?

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

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

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

88
Ayman El Temsahi

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

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

123
Dan Prince

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

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

35
Samuel G. P.

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

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

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

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

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

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

11
Praveen

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

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

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

3
Kai Qing

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

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

3
Ben Gulapa