Question

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

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

该属性是什么？它的功能是什么？

Answer 1

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属性。这称为 inflating 组件树。

您可能还会注意到，如果React在客户端呈现，它会使用data-reactid属性，即使它不需要丢失其引用。在某些浏览器中，它使用.innerHTML将您的应用程序插入到DOM中，然后立即对组件树进行膨胀，从而提升性能。

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

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

Answer 2

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

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

Answer 3

HTML5中的

Custom Data attribute

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

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

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

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

如果您想找到差异，请查看此SO answer and comment中的小提琴。

Answer 4

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

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

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

Answer 5

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

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

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

5 个答案: