html 中的 data-reactid 属性是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17585787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what's data-reactid attribute in html?
提问by Ayman El Temsahi
While I was going through the HTML of some pages, I noticed that some of them use this attribute "data-reactid" like :
当我浏览一些页面的 HTML 时，我注意到其中一些使用这个属性“data-reactid”，例如：
<a data-reactid="......" ></a>
What is that attribute and what is its function ?
该属性是什么，它的功能是什么？
回答by Dan Prince
The data-reactidattribute is a custom attribute used so that Reactcan uniquely identify its components within the DOM.
该data-reactid属性是使用的自定义属性，以便React可以在 DOM 中唯一标识其组件。
This is important because React applications can be rendered at the serveras well as the client. Internally React builds up a representation of references to the DOM nodes that make up your application (simplified version is below).
这很重要，因为 React 应用程序可以在服务器和客户端呈现。React 在内部构建了对组成应用程序的 DOM 节点的引用的表示（简化版本如下）。
{
id: '.1oqi7occu80',
node: DivRef,
children: [
{
id: '.1oqi7occu80.0',
node: SpanRef,
children: [
{
id: '.1oqi7occu80.0.0',
node: InputRef,
children: []
}
]
}
]
}
There's no way to share the actual object references between the server and the client and sending a serialized version of the entire component tree is potentially expensive. When the application is rendered at the server and React is loaded at the client, the only data it has are the data-reactidattributes.
没有办法在服务器和客户端之间共享实际的对象引用，并且发送整个组件树的序列化版本可能会很昂贵。当应用程序在服务器端呈现并在客户端加载 React 时，它拥有的唯一数据是data-reactid属性。
<div data-reactid='.loqi70ccu80'>
<span data-reactid='.loqi70ccu80.0'>
<input data-reactid='.loqi70ccu80.0' />
</span>
</div>
It needs to be able to convert that back into the data structure above. The way it does that is with the unique data-reactidattributes. This is called inflatingthe component tree.
它需要能够将其转换回上面的数据结构。它这样做的方式是具有独特的data-reactid属性。这称为膨胀组件树。
You might also notice that if React renders at the client-side, it uses the data-reactidattribute, even though it doesn't need to lose its references. In some browsers, it inserts your application into the DOM using .innerHTMLthen it inflates the component tree straight away, as a performance boost.
您可能还注意到，如果 React 在客户端呈现，它会使用该data-reactid属性，即使它不需要丢失其引用。在某些浏览器中，它使用 将您的应用程序插入到 DOM 中，.innerHTML然后它会立即膨胀组件树，作为性能提升。
The other interesting difference is that client-side rendered React ids will have an incremental integer format (like .0.1.4.3), whereas server-rendered ones will be prefixed with a random string (such as .loqi70ccu80.1.4.3). This is because the application might be rendered across multiple servers and it's important that there are no collisions. At the client-side, there is only one rendering process, which means counters can be used to ensure unique ids.
另一个有趣的区别是客户端呈现的 React id 将具有增量整数格式（如.0.1.4.3），而服务器呈现的将使用随机字符串作为前缀（如.loqi70ccu80.1.4.3）。这是因为应用程序可能会在多个服务器上呈现，并且没有冲突很重要。在客户端，只有一个渲染过程，这意味着可以使用计数器来确保唯一的 id。
React 15uses document.createElementinstead, so client rendered markup won't include these attributes anymore.
React 15document.createElement改为使用，因此客户端呈现的标记将不再包含这些属性。
回答by Samuel G. P.
It's a custom html attribute but probably in this case is used by the Facebook React JS Library.
这是一个自定义的 html 属性，但在这种情况下可能被 Facebook React JS 库使用。
Take a look: http://facebook.github.io/react/
回答by Praveen
Custom Data attributein HTML5
HTML5 中的自定义数据属性
Would like to quote Ian's comment in my answer:
想在我的回答中引用 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.
它只是元素上的一个属性（有效的），您可以使用它来存储有关它的数据/信息。
此代码稍后在事件处理程序中检索它，并使用它来查找目标输出元素。它有效地存储了应该输出文本的 div 的类。
reactidis just a suffix, you can have any name here eg: data-Ayman.
reactid只是一个后缀，您可以在此处使用任何名称，例如：data-Ayman。
If you want to find the difference check the fiddles in this SO answer and comment.
如果您想找到差异，请检查此SO answer 和 comment 中的小提琴。
回答by Ben Gulapa
That's the HTML data attribute. See this for more detail: http://html5doctor.com/html5-custom-data-attributes/
那是 HTML 数据属性。有关更多详细信息，请参阅：http: //html5doctor.com/html5-custom-data-attributes/
Basically it's just a container of your custom data while still making the HTML valid.
It's data-plus some unique identifier.
基本上它只是一个自定义数据的容器，同时仍然使 HTML 有效。它data-加上一些唯一标识符。
回答by Kai Qing
data attributes are commonly used for a variety of interactions. Typically via javascript. They do not affect anything regarding site behavior and stand as a convenient method to pass data for whatever purpose needed. Here is an article that may clear things up:
数据属性通常用于各种交互。通常通过javascript。它们不会影响与站点行为有关的任何事情，并且是为任何需要的目的传递数据的便捷方法。这是一篇可以解决问题的文章：
http://ejohn.org/blog/html-5-data-attributes/
http://ejohn.org/blog/html-5-data-attributes/
You can create a data attribute by prefixing data-to any standard attribute safe string (alphanumeric with no spaces or special characters). For example, data-idor in this case data-reactid
您可以通过data-为任何标准属性安全字符串（不含空格或特殊字符的字母数字）添加前缀来创建数据属性。例如，data-id或者在这种情况下data-reactid
