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

问题描述

当我浏览一些页面的 HTML 时，我注意到他们中的一些使用这个属性”data-reactid” 像：

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

这个属性是什么，它的功能是什么？

最佳解决方案

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

这很重要，因为 React 应用程序可以是 rendered at the server 以及客户端。内部反应构建了构成应用程序的 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 代替使用 document.createElement，因此客户端渲染的标记将不再包含这些属性。

次佳解决方案

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

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

第三种解决方案

HTML5 中的自定义数据属性

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

It’s just an attribute (a valid one) on the element that you can use to store data/info about it.

This code then retrieves it later in the event handler, and uses it to find the target output element. It effectively stores the class of the div where its text should be outputted.

reactid 只是一个后缀，您可以在这里有任何名称，例如：data-Ayman 。

如果你想找到差异检查这个 SO answer and comment 中的 fiddles 。

第四种方案

数据属性通常用于各种交互。通常通过 javascript 。它们不影响任何有关网站行为的信息，并且作为传递数据的方便方法，可以为任何目的而使用。这是一篇文章，可能会清除以下内容：

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

您可以通过将 data-前缀到任何标准属性安全字符串 (字母数字，无空格或特殊字符) 来创建数据属性。例如，data-id 或本例中为 data-reactid

第五种方案

这是 HTML 数据属性。有关详细信息，请参见：http://html5doctor.com/html5-custom-data-attributes/

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

参考文献

what’s data-reactid attribute in html?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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