html 中的 data-reactid 屬性是什麼？

問題描述

當我瀏覽一些頁面的 HTML 時，我注意到他們中的一些使用這個屬性”data-reactid” 像：

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

這個屬性是什麼，它的功能是什麼？

最佳解決方案

data-reactid 屬性是一個使用的自定義屬性，以便 React 可以在 DOM 中唯一標識其組件。

這很重要，因為 React 應用程序可以是 rendered at the server 以及客户端。內部反應構建了構成應用程序的 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 代替使用 document.createElement，因此客户端渲染的標記將不再包含這些屬性。

次佳解決方案

這是一個自定義的 html 屬性，但在這種情況下可能由 Facebook React JS Library 使用。

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

第三種解決方案

HTML5 中的自定義數據屬性

想在我的回答中引用 Ian 的評論：

It’s just an attribute (a valid one) on the element that you can use to store data/info about it.

This code then retrieves it later in the event handler, and uses it to find the target output element. It effectively stores the class of the div where its text should be outputted.

reactid 只是一個後綴，您可以在這裏有任何名稱，例如：data-Ayman 。

如果你想找到差異檢查這個 SO answer and comment 中的 fiddles 。

第四種方案

數據屬性通常用於各種交互。通常通過 javascript 。它們不影響任何有關網站行為的信息，並且作為傳遞數據的方便方法，可以為任何目的而使用。這是一篇文章，可能會清除以下內容：

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

您可以通過將 data-前綴到任何標準屬性安全字符串 (字母數字，無空格或特殊字符) 來創建數據屬性。例如，data-id 或本例中為 data-reactid

第五種方案

這是 HTML 數據屬性。有關詳細信息，請參見：http://html5doctor.com/html5-custom-data-attributes/

基本上，它只是您的自定義數據的容器，同時仍然使 HTML 有效。它是 data-加上一些唯一的標識符。

參考文獻

what’s data-reactid attribute in html?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

html 中的 data-reactid 屬性是什麼？