html中的data-reactid属性是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (4301)

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

用户回答回答于

这是一个自定义html属性,但在这种情况下可能会被Facebook React JS Library使用。

扫码关注云+社区

领取腾讯云代金券