当我浏览某些页面的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。