当我浏览某些页面的 HTML 时，我注意到其中一些使用此属性“data-reactid”，例如：
<a data-reactid="......" ></a>
那个属性是什么，它的作用是什么？
【问题讨论】：
data-reactid 是React JavaScript library 使用的自定义属性。这是为与 Facebook 和 Instagram 一起使用而开发的。
标签： javascript html reactjs
数据属性通常用于各种交互。通常通过 javascript。它们不会影响有关站点行为的任何内容，并且可以作为出于任何需要的目的传递数据的便捷方法。这里有一篇文章可以解决问题：
http://ejohn.org/blog/html-5-data-attributes/
您可以通过在任何标准属性安全字符串（不含空格或特殊字符的字母数字）前添加 data- 前缀来创建数据属性。例如，data-id 或在本例中为 data-reactid
【讨论】：
Custom Data attribute 在 HTML5 中
想在我的回答中引用 Ian 的评论：
它只是你可以使用的元素上的一个属性（一个有效的） 存储有关它的数据/信息。
此代码稍后会在事件处理程序中检索它，并将其用于 找到目标输出元素。它有效地存储了类 应该输出其文本的 div。
reactid 只是一个后缀，您可以在此处使用任何名称，例如：data-Ayman。
如果您想找到不同之处，请查看此SO answer and comment 中的小提琴。
【讨论】：
这就是 HTML 数据属性。 更多详情请参见：http://html5doctor.com/html5-custom-data-attributes/
基本上，它只是您的自定义数据的容器，同时仍使 HTML 有效。
它是data- 加上一些唯一标识符。
【讨论】：
这是一个自定义的 html 属性，但在这种情况下可能由 Facebook React JS 库使用。
【讨论】：
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，因此客户端呈现的标记将不再包含这些属性。
【讨论】：