该
data-reactid属性是一个自定义属性，使React可以在DOM中唯一地标识其组件。
这很重要，因为React应用程序可以在服务器和客户端上呈现。在内部，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
ID将具有增量整数格式（如
.0.1.4.3），而服务器渲染的ID将以随机字符串作为前缀（如
.loqi70ccu80.1.4.3）。这是因为该应用程序可能在多台服务器上呈现，并且没有冲突很重要。在客户端，只有一个渲染过程，这意味着可以使用计数器来确保唯一的ID。
React
15
document.createElement改为使用，因此客户端呈现的标记将不再包含这些属性。
