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 屬性是什麼？