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

Question

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

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

那个属性是什么,它的功能是什么？

Answer 1

该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.

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

Answer 2

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

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

Answer 3

HTML5中的自定义数据属性

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

它只是元素上的一个属性(有效的属性),可用于存储有关它的数据/信息.

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

reactid只是一个后缀,你可以在这里有任何名字,例如:data-Ayman.

如果你想找到差异,请查看这个SO答案和评论中的小提琴.