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

Question

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

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

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

Answer 1

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

这很重要，因为 React 应用程序可以是 rendered at the server以及客户。 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)，而服务器呈现的将以随机字符串为前缀(例如作为 .loqi70ccu80.1.4.3)。这是因为应用程序可能会在多个服务器上呈现，并且没有冲突很重要。在客户端，只有一个渲染进程，这意味着可以使用计数器来确保唯一的id。

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