97

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

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

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

4

5 回答 5

136

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

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

于 2015-11-28T04:49:30.633 回答
35

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

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

于 2014-10-14T16:11:50.447 回答
11

HTML5 中的自定义数据属性

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

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

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

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

如果您想找到差异，请检查此SO 答案和评论中的小提琴。

于 2013-07-11T05:40:37.637 回答
3

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

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

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

于 2013-07-11T05:40:12.790 回答
3

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

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

于 2013-07-11T05:41:16.413 回答