HTML 中的 data-reactid 属性介绍
介绍
HTML 属性（如class和id）用于以不同方式标识元素。虽然类用于将相似的 HTML 元素一起标识以便设置样式，但id属性用于唯一标识元素。HTML 还允许自定义数据属性，其中一个属性是data-reactid，它可帮助您唯一地标识 React 应用中 DOM 树中的组件。在本指南中，您将了解data-reactid属性是什么以及它在何处以及如何使用。
HTML 中的数据属性
HTML 中的自定义数据属性允许您在标记中即时存储和访问可能对您的应用而言是私有的数据。它们以关键字data-为前缀，您可以将任何类型的字符串作为值。例如，考虑以下标记：
<li data-cost="$10" data-available="true">Burgers</li>
在上面的li中，您将一些有用的数据存储在应用的 JavaScript 中，您可以立即使用这些数据，而无需向服务器发出请求。因此，当用户访问您的外卖应用并点击汉堡时，您可以立即通知他们该商品的供应情况、价格等。
类似地，data-reactid属性也存储了一些有关 DOM 树的信息，可用于唯一地标识驻留在树中的组件。
用例和示例
React 应用可以在客户端和服务器端渲染。但是，如果不发送整个序列化版本，则无法在树中共享组件引用，这本身就是一项昂贵的任务。因此，此属性的值用于在内部构建 DOM 树中节点的表示，这些节点共同构成了您的应用。
例如，考虑以下 DOM 树的简化版本：
{
id: '.W3GegB3Bzq',
node: DivRef,
children: [
{
id: '.tZtxhNj2eY',
node: SpanRef,
children: [
{
id: '.hgwiVqqeZJ',
node: InputRef,
children: []
}
]
}
]
}
现在，当您的 React 应用程序在服务器上呈现时，它会使用唯一的data-reactid属性将其转换为其原始数据结构，如上所示。
<div data-reactid='.W3GegB3Bzq'>
<span data-reactid='.tZtxhNj2eY'>
<input data-reactid='.hgwiVqqeZJ' />
</span>
</div>
这是一个服务器端渲染应用的示例，其中ID通常为随机字符串的形式，可以唯一地标识一个元素。唯一的标准是字符串不应重复，这样可以避免属于不同元素的不同ID之间发生冲突。当您想使用多个服务器来渲染 React 应用时，这很有用。
客户端渲染的 React 应用使用特定的整数格式作为id，因为您可能不需要多个渲染过程。请看下面的示例。
{
id: '.121,
node: DivRef,
children: [
{
id: '.123',
node: SpanRef,
children: [
{
id: '.125',
node: InputRef,
children: []
}
]
}
]
}
结论
要渲染服务器端 React 应用，data-reactid属性对于在客户端和服务器之间共享 DOM 对象引用非常有用。在 React 15 之后的最新版本中，客户端渲染的应用不再需要此属性，因为它使用document.createElement来更快地交付轻量级 DOM。您可以在此处阅读有关此更新日志的更多信息。
如果您有任何疑问，请随时在Codealphabet上提问。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~