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

当我浏览某些页面的HTML时,我注意到其中一些使用了这个属性" data-reactid" 喜欢 :

 <a data-reactid="......" ></a>

那个属性是什么,它的功能是什么?

Ayman El Temsahi asked 2019-08-26T19:29:32Z
5个解决方案
122 votes

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时,它拥有的唯一数据是document.createElement属性。

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

它需要能够将其转换回上面的数据结构。 它的方式是使用独特的document.createElement属性。 这称为对组件树进行膨胀。

您可能还注意到,如果React在客户端呈现,它使用document.createElement属性,即使它不需要丢失其引用。 在某些浏览器中,它使用.loqi70ccu80.1.4.3将您的应用程序插入到DOM中,然后立即对组件树进行充气,从而提升性能。

另一个有趣的区别是客户端呈现的React ID将具有增量整数格式(如document.createElement),而服务器呈现的格式将以随机字符串为前缀(例如.loqi70ccu80.1.4.3)。 这是因为应用程序可能跨多个服务器呈现,并且重要的是没有冲突。 在客户端,只有一个渲染过程,这意味着可以使用计数器来确保唯一的ID。

React 15使用document.createElement代替,因此客户端呈现的标记不再包含这些属性。

Dan Prince answered 2019-08-26T19:30:28Z
35 votes

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

看看:[http://facebook.github.io/react/]

Samuel G. P. answered 2019-08-26T19:31:00Z
11 votes

HTML5中的自定义数据属性

想在我的回答中引用伊恩的评论:

它只是您可以使用的元素上的属性(有效的属性)   存储有关它的数据/信息。

然后,此代码稍后在事件处理程序中检索它,并将其用于   找到目标输出元素。 它有效地存储了类的   应该输出文本的div。

reactid只是一个后缀,您可以在这里任何名称,例如:data-Ayman

如果你想找到差异,请查看这个SO答案和评论中的小提琴。

Praveen answered 2019-08-26T19:32:00Z
3 votes

数据属性通常用于各种交互。 通常通过javascript。 它们不会影响有关站点行为的任何内容,并且可以作为传递数据的便捷方法,无论出于何种目的。 这篇文章可能会让事情变得清晰:

[http://ejohn.org/blog/html-5-data-attributes/]

您可以通过将data-前缀添加到任何标准属性安全字符串(不带空格或特殊字符的字母数字)来创建数据属性。 例如,data-id或在这种情况下为data-reactid

Kai Qing answered 2019-08-26T19:32:40Z
3 votes

这是HTML数据属性。有关详细信息,请参阅此处:[http://html5doctor.com/html5-custom-data-attributes/]

基本上它只是自定义数据的容器,同时仍然使HTML有效。它的data-加上一些唯一标识符。

Ben Gulapa answered 2019-08-26T19:33:14Z
translate from https://stackoverflow.com:/questions/17585787/whats-data-reactid-attribute-in-html