什么's的data reactid属性

what's data-reactid attribute in html?

本文关键字：data reactid 属性 什么      更新时间：2023-09-26

当我浏览一些页面的HTML时，我注意到其中一些页面使用了这个属性"data reactid"，比如：

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

这个属性是什么，它的功能是什么？

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属性，即使它不需要丢失引用。在某些浏览器中，它使用.innerHTML将应用程序插入DOM，然后直接展开组件树，以提高性能。

另一个有趣的区别是，客户端呈现的React ID将具有增量整数格式（如.0.1.4.3），而服务器呈现的ReactID将以随机字符串（如.loqi70ccu80.1.4.3）为前缀。这是因为应用程序可能在多个服务器上呈现，并且不发生冲突很重要。在客户端，只有一个呈现过程，这意味着可以使用计数器来确保id的唯一性。

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

这是一个自定义的html属性，但在本例中可能由Facebook React JS库使用。

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

HTML5 中的自定义数据属性

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

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

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

reactid只是一个后缀，你可以在这里有任何名字，例如：data-Ayman。

如果你想找到差异，请查看SO回答和评论中的细节。

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

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

您可以通过将data-前缀为任何标准属性安全字符串（不带空格或特殊字符的字母数字）来创建数据属性。例如，data-id或在本例中为data-reactid

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

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

相关文章：