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

93

在浏览某些页面的HTML时，我注意到其中一些页面使用此属性“ data-reactid”，例如：

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

该属性是什么，其功能是什么？

javascript html reactjs

— 艾曼·特姆萨希
source

30

data-reactid是React JavaScript库使用的自定义属性。开发用于Facebook和Instagram。

— amit

7

请注意，所有答案都在解释什么是自定义日期属性，而不是在解释什么是数据反应堆。它用于react以便能够使用react元素类实例引用dom对象。

— adrianj98

2

@ adrianj98，您为什么不发表评论作为答案？

— 章鱼

3

想知道，如果Facebook使用React，为什么我在他们的网站上找不到任何数据反应堆？

— PabloRosales

131

的 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），而服务器渲染的ID将以随机字符串作为前缀（例如.loqi70ccu80.1.4.3）的。这是因为该应用程序可能在多台服务器上呈现，并且没有冲突很重要。在客户端，只有一个渲染过程，这意味着可以使用计数器来确保唯一的ID。

React 15document.createElement改为使用，因此客户端呈现的标记将不再包含这些属性。

— 丹·普林斯
source

3

这应该是公认的答案，因为它是回答问题的唯一答案。

— 约翰

gcanti.github.io/2014/11/24/…–卡他非他

— 明

2

对于React v15 +：>服务器呈现的内容仍然存在数据反应堆，但是它比以前小得多，并且只是一个自动递增计数器。

— RationalDev喜欢GoFundMonica

1

@RationalDev啊，这很有趣。如果应用程序在多台服务器上呈现，如何解决冲突问题？

— 丹·普林斯

1

我正在寻找最后一部分，感谢您添加。我很困惑，为什么我的客户端标记没有像以前那样包含它，但是我应用程序的另一部分确实包含了它（它在服务器上呈现）。

— jacoballenwood

35

这是一个自定义html属性，但在这种情况下，可能由Facebook React JS库使用。

看看：http : //facebook.github.io/react/

— 塞缪尔GP
source

11

HTML5中的自定义数据属性

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

它只是元素上的一个属性（有效属性），可用于存储有关它的数据/信息。

然后，此代码稍后在事件处理程序中对其进行检索，并使用它来查找目标输出元素。它有效地存储应在其文本输出的div的类。

reactid只是一个后缀，您可以在此处使用任何名称，例如：data-Ayman。

如果您想找到区别，请在此SO答案和注释中检查小提琴。

— 普拉文
source

8

请注意，根据提供的链接，您不能在属性名称中使用大写字母。

— Lez 2014年

1

是的，这种限制有点误导。DOM本身中的实际属性名称不能使用大写字母，但是HTML标记中写出的属性可以使用大写字母，因为所有标记和属性名称在读取时都会自动转换为小写。因此，在HTML中，您可以使用大写字母，但在JS中，它们都将以小写字母结尾。w3.org/TR/2010/WD-html5-20101019/…–

— Peeja

3

数据属性通常用于各种交互。通常通过javascript。它们不会影响任何有关站点行为的内容，并且可以作为方便的方法出于任何目的传递数据。这是一篇可能会解决问题的文章：

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

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

— 开清
source

3

这就是HTML数据属性。详情请参见：http : //html5doctor.com/html5-custom-data-attributes/

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

— 本古拉帕
source