当我浏览某些页面的HTML时，我注意到其中一些人使用此属性“data-reactid”，如：
<a data-reactid="......" ></a>
这个属性是什么，它的功能是什么？
该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），而服务器渲染的则会以随机字符串（例如）作为前缀.loqi70ccu80.1.4.3。这是因为应用程序可能在多个服务器上呈现，并且没有冲突很重要。在客户端，只有一个渲染过程，这意味着可以使用计数器来确保唯一的ID。
