当我浏览一些页面的 HTML 时,我注意到其中一些页面使用了“data-reactid”属性,例如:
<a data-reactid="......" ></a>
该属性是什么以及它的功能是什么?
该data-reactid属性是一个自定义属性,用于使得React可以在 DOM 中唯一地标识其组件。
data-reactid
这很重要,因为 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然后立即扩充组件树,以提高性能。
.innerHTML
另一个有趣的区别是,客户端渲染的 React ID 将采用增量整数格式(如.0.1.4.3),而服务器渲染的 ID 将以随机字符串作为前缀(如.loqi70ccu80.1.4.3)。这是因为应用程序可能在多个服务器上渲染,因此重要的是不要发生冲突。在客户端,只有一个渲染过程,这意味着可以使用计数器来确保唯一的 ID。
.0.1.4.3
.loqi70ccu80.1.4.3