什么是html中的data-reactid属性？ [英] what's data-reactid attribute in html?

问题描述

当我浏览某些页面的HTML时，我注意到其中一些使用此属性data-reactid，如：

While I was going through the HTML of some pages, I noticed that some of them use this attribute "data-reactid" like :

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

该属性是什么？它的功能是什么？

What is that attribute and what is its function ?

推荐答案

data-reactid 属性是一个自定义属性，因此 React 可以唯一标识DOM中的组件。

The data-reactid attribute is a custom attribute used so that React can uniquely identify its components within the DOM.

这很重要，因为React应用程序可以在服务器上呈现以及客户。内部React构建了对构成应用程序的DOM节点的引用的表示（简化版本如下）。

This is important because React applications can be rendered at the server as 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).

{
  id: '.1oqi7occu80',
  node: DivRef,
  children: [
    {
      id: '.1oqi7occu80.0',
      node: SpanRef,
      children: [
        {
          id: '.1oqi7occu80.0.0',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}

没有办法共享服务器和客户端之间的实际对象引用，并且发送整个组件树的序列化版本可能很昂贵。当在服务器上呈现应用程序并在客户端加载React时，它拥有的唯一数据是 data-reactid 属性。

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-reactid attributes.

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

它需要能够将其转换回上面的数据结构。它的方式是使用唯一的 data-reactid 属性。这称为膨胀组件树。

It needs to be able to convert that back into the data structure above. The way it does that is with the unique data-reactid attributes. This is called inflating the component tree.

您可能还会注意到，如果React在客户端呈现，则使用 data-reactid 属性，即使它不需要丢失其引用。在某些浏览器中，它使用 .innerHTML 将您的应用程序插入到DOM中，然后它会立即膨胀组件树，从而提升性能。

You might also notice that if React renders at the client side, it uses the data-reactid attribute, even though it doesn't need to lose its references. In some browsers it inserts your application into the DOM using .innerHTML then it inflates the component tree straight away, as a performance boost.

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

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 15 使用 document.createElement 而不是，因此客户端呈现的标记将不再包含这些属性。

React 15 uses document.createElement instead, so client rendered markup won't include these attributes anymore.

这篇关于什么是html中的data-reactid属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！