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

<p>пока я просматривал html некоторых страниц, я заметил, что некоторые из них используют этот атрибут "data-реакции", например:</p><pre><code> <a data-reactid="......" ></a> </code></pre><p>что это за атрибут и какова его функция?</p>

<p>атрибут <code>data-reactid</code> - это пользовательский атрибут, используемый для того, чтобы <a href="https://facebook.github.io/react">react</a> мог однозначно идентифицировать его компоненты в dom.</p><p>это важно, потому что приложения react могут быть <a href="https://facebook.github.io/react/docs/top-level-api.html#reactdomserver">отображены на сервере</a> , а также клиентом. внутренне react создает представление ссылок на узлы dom, которые составляют ваше приложение (упрощенная версия приведена ниже).</p><pre><code>{ id: '.1oqi7occu80', node: divref, children: [ { id: '.1oqi7occu80.0', node: spanref, children: [ { id: '.1oqi7occu80.0.0', node: inputref, children: [] } ] } ] } </code></pre><p>невозможно разделить фактические ссылки на объекты между сервером и клиентом, и отправка сериализованной версии всего дерева компонентов потенциально дорогостоящая. когда приложение отображается на сервере и на клиенте загружается react, единственными данными, которые у него есть, являются атрибуты <code>data-reactid</code>.</p><pre><code><div data-reactid='.loqi70ccu80'> <span data-reactid='.loqi70ccu80.0'> <input data-reactid='.loqi70ccu80.0' /> </span> </div> </code></pre><p>это должно быть в состоянии преобразовать это обратно в структуру данных выше. это происходит с помощью уникальных атрибутов <code>data-reactid</code>. это называется <em> раздувать </em> дерево компонентов.</p><p>вы также можете заметить, что если react визуализируется на стороне клиента, он использует атрибут <code>data-reactid</code>, даже если ему не нужно терять ссылки. в некоторых браузерах он вставляет ваше приложение в dom с помощью <code>.innerhtml</code>, а затем сразу же раздувает дерево компонентов, что повышает производительность.</p><p>другое интересное отличие состоит в том, что идентификаторы react на стороне клиента будут иметь инкрементный целочисленный формат (например, <code>.0.1.4.3</code>), тогда как для визуализированных на сервере префиксов будет использоваться случайная строка (например, <code>.loqi70ccu80.1.4.3</code>). это связано с тем, что приложение может отображаться на нескольких серверах, и важно, чтобы не было коллизий. на стороне клиента существует только один процесс рендеринга, что означает, что счетчики могут использоваться для обеспечения уникальных идентификаторов.</p><p> <a href="https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html#document.createelement-is-in-and-data-reactid-is-out"><strong> в react 15 </strong> вместо этого используется <code>document.createelement</code></a> , поэтому разметка, представленная клиентом, больше не будет включать эти атрибуты.</p>

<p>это пользовательский атрибут html, но, вероятно, в этом случае он используется библиотекой facebook react js.</p><p>посмотрите: <a href="http://facebook.github.io/react/">http://facebook.github.io/react/</a> </p>

<p> <a href="http://html5doctor.com/html5-custom-data-attributes/"><strong> атрибут пользовательских данных </strong></a> в html5</p><p><strong> хотелось бы процитировать комментарий яна в моем ответе: </strong></p><blockquote> <p>это просто атрибут (действительный) элемента, который вы можете использовать для хранения данных/информации о нем.</p> <p>затем этот код извлекает его позже в обработчике событий и использует его для поиска целевого выходного элемента. он эффективно хранит класс div, где его текст должен быть выведен.</p> </blockquote><p><code>reactid</code> - это просто суффикс, здесь вы можете указать любое имя, например: <code>data-ayman</code>.</p><p>если вы хотите найти разницу, проверьте скрипты в этом <a href="https://stackoverflow.com/a/17573494/1671639">так ответ и комментарий</a> .</p>

<p>это атрибут данных html. см. это для более подробной информации: <a href="http://html5doctor.com/html5-custom-data-attributes/">http://html5doctor.com/html5-custom-data-attributes/</a> </p><p>по сути, это просто контейнер ваших пользовательских данных, в то же время делая html-код корректным. это <code>data-</code> плюс некоторый уникальный идентификатор.</p>