ReactJS данные reactid имеет слово в Instagram исходного коде

Question

Если вы идете в Instaram и открыть консоль, вы увидите, что есть слова, используемые в атрибуте данного reactid

https://instagram.com/kyliejenner/

data-reactid=".0.1.0.1:$mostRecent:0.0.$0.$1036585483152156993.0.2" 

Имеют Ищите себя. Как они это сделали? и почему это происходит?

Любые мысли?

Answer 1

Это из-за атрибута key.

При динамическом создании дочерних компонентов дети могут быть идентифицированы однозначно с помощью атрибута key. Это значение будет видно в атрибуте data-reactid в указанных элементов после того, как оказывается в DOM:

data-reactid=".0.1.$something" 

something на самом деле значение атрибута key.

Допустим, у вас есть Queue и QueueItem. Queue компонент будет иметь queueData массив и в его render() метод, вы будете динамически создавать QueueItem компоненты с key атрибута:

// QueueItem component. 
render: function() { 
    return (
    <li> 
     { this.props.name } 
    </li> 
); 
} 

// Queue component. 
render: function() { 
    return (
    <ul className="queue-data"> 
     { 
     this.state.queueData.map(queueItem => <QueueItem key={ 'most-recent-' + queueItem.id } />) 
     } 
    </ul> 
); 
} 

Это приведет к следующей разметке:

<ul class="queue-data" data-reactid=".0.1"> 
    <li data-reactid=".0.1.$most-recent-1">one</li> 
    <li data-reactid=".0.1.$most-recent-2">two</li> 
    <li data-reactid=".0.1.$most-recent-3">three</li> 
</ul> 

Дополнительная информация о динамичных детях можно найти here