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

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

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

он должен иметь возможность конвертировать это обратно в структуру данных выше. То, как это происходит, связано с unique data-reactid атрибуты. Это называется накачивания компонент дерево.

вы также можете заметить, что если React отображает на стороне клиента, он использует data-reactid атрибут, даже если ему не нужно терять свои ссылки. В некоторых браузерах он вставляет ваше приложение в DOM с помощью .innerHTML затем он надувает дерево компонентов сразу, как повышение производительности.

другое интересное отличие заключается в том, что идентификаторы реакции на стороне клиента будут иметь инкрементный целочисленный формат (например,.0.1.4.3), тогда как сервер оказываемых те будет иметь префикс случайной строки (например,.loqi70ccu80.1.4.3). Это связано с тем, что приложение может отображаться на нескольких серверах, и важно, чтобы не было конфликтов. На стороне клиента есть только один процесс рендеринга, что означает, что счетчики могут использоваться для обеспечения уникальных идентификаторов.

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