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

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

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

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

5 83
javascript html reactjs

5 ответов:

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

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

116

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

взгляните:http://facebook.github.io/react/

35

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

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

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

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

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

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

11

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

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

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

3

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

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

3