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

Posted 2023-02-22

【中文标题】什么是 html 中的 data-reactid 属性？

【英文标题】：what's data-reactid attribute in html?

【发布时间】：2013-07-09 06:38:42

【问题描述】：

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

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

那个属性是什么，它的作用是什么？

【问题讨论】：

data-reactid 是React javascript library 使用的自定义属性。这是为与 Facebook 和 Instagram 一起使用而开发的。

请注意，所有答案都在解释什么是自定义日期属性，而不是解释什么是 data-reactid。 react 使用它来引用带有 react 元素类实例的 dom 对象。

@adrianj98，你为什么不发表你的评论作为答案呢？

想知道，如果 Facebook 使用 React，为什么我在他们的网站上找不到任何 data-reactid？

【参考方案1】：

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

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

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

【参考方案2】：

Custom Data attribute 在 HTML5 中

想在我的回答中引用 Ian 的评论：

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

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

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

如果您想找到不同之处，请查看此SO answer and comment 中的小提琴。

【讨论】：

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

是的，这个限制有点误导。 DOM 本身中的实际属性名称不能包含大写字母，但 HTML 标签中写出的属性可以，因为所有标签和属性名称在读取时都会自动小写。所以在 HTML 中你可以使用大写字母，但在 JS 中它会全部变为小写。 w3.org/TR/2010/WD-html5-20101019/…

【参考方案3】：

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

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

【参考方案4】：

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

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

【参考方案5】：

data-reactid 属性是一个自定义属性，以便React 可以在 DOM 中唯一标识其组件。

这很重要，因为 React 应用程序可以是 rendered at the server 以及客户端。 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 属性，即使它不需要丢失其引用。在某些浏览器中，它会使用 .innerHTML 将您的应用程序插入到 DOM 中，然后它会立即扩充组件树，以提高性能。

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

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

【讨论】：

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

gcanti.github.io/2014/11/24/…

对于 React v15+：> data-reactid 仍然存在于服务器渲染的内容中，但是它比以前小得多，并且只是一个自动递增的计数器。

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

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