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

IT技术 javascript html reactjs
2021-03-24 11:25:21

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

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

该属性是什么,它的功能是什么?

5个回答

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改为使用,因此客户端呈现的标记将不再包含这些属性。

对于 React v15+:> data-reactid 对于服务器渲染的内容仍然存在,但是它比以前小得多,并且只是一个自动递增的计数器。
2021-05-27 11:25:21
2021-05-30 11:25:21
这应该是公认的答案,因为它是唯一可以回答问题的答案。
2021-06-02 11:25:21
@RationalDev 啊,这很有趣。如果应用程序在多个服务器上呈现,它如何解决冲突问题?
2021-06-05 11:25:21
我正在寻找最后一部分,感谢您添加。我很困惑为什么我的客户端标记没有像以前那样包含它,但我的应用程序的另一部分确实有它(它在服务器上呈现)。
2021-06-17 11:25:21

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

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

HTML5 中的自定义数据属性

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

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

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

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

如果您想找到差异,请检查此SO answer 和 comment 中的小提琴

请注意,根据您提供的链接,您不能在属性名称中使用大写字母。
2021-06-08 11:25:21
是的,这个限制有点误导。DOM 本身中的实际属性名称不能有大写字母,但在 HTML 标记中写出的属性可以,因为所有标记和属性名称在读取时都会自动小写。所以在 HTML 中你可以使用大写字母,但在 JS 中它最终会变成小写。w3.org/TR/2010/WD-html5-20101019/...
2021-06-17 11:25:21

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

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

您可以通过data-为任何标准属性安全字符串(不含空格或特殊字符的字母数字)添加前缀创建数据属性例如,data-id或者在这种情况下data-reactid

那是 HTML 数据属性。有关更多详细信息,请参阅:http : //html5doctor.com/html5-custom-data-attributes/

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