Ответ 1
Атрибут data-reactid - это настраиваемый атрибут, используемый React, который может однозначно идентифицировать его компоненты в DOM.
Это важно, потому что приложения React могут быть отображены на сервере, а также клиентом. Internall 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, поэтому клиентская разметка не будет включать эти атрибуты.