HTMLのdata-reactid属性とは何ですか？

Question 1

一部のページのHTMLを調べていたところ、一部のページで次のように「data-reactid」属性が使用されていることに気付きました。

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

その属性とは何ですか？その機能は何ですか？

Question 2

この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: []
        }
      ]
    }
  ]
}

サーバーとクライアントの間で実際のオブジェクト参照を共有する方法はなく、コンポーネントツリー全体のシリアル化されたバージョンを送信すると、コストが高くなる可能性があります。アプリケーションがサーバーでレンダリングされ、クライアントにロードされて反応すると、それが持っている唯一のデータがある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）が前に付けられることです。これは、アプリケーションが複数のサーバーにわたってレンダリングされる可能性があり、衝突がないことが重要であるためです。クライアント側では、レンダリングプロセスは1つしかありません。つまり、一意のIDを確保するためにカウンターを使用できます。

React 15はdocument.createElement代わりにを使用するため、クライアントがレンダリングしたマークアップにはこれらの属性は含まれなくなります。

Question 3

これはカスタムhtml属性ですが、おそらくこの場合、Facebook React JS Libraryによって使用されます。

見てください：http : //facebook.github.io/react/

Question 4

HTML5のカスタムデータ属性

私の答えでイアンのコメントを引用したいと思います：

これは、要素に関するデータ（有効な属性）であり、要素に関するデータ/情報を格納するために使用できます。

その後、このコードはイベントハンドラーでそれを取得し、それを使用してターゲット出力要素を見つけます。テキストを出力するdivのクラスを効果的に格納します。

reactidは単なるサフィックスですdata-Ayman。ここに任意の名前を付けることができます（例：）。

違いを見つけたい場合は、このSO回答のフィドルをチェックしてコメントしてください。

Question 5

データ属性は一般に、さまざまな相互作用に使用されます。通常はJavaScriptを使用します。これらはサイトの動作に影響を与えることはなく、必要な目的でデータを渡す便利な方法として機能します。以下に、問題を解決できる記事を示します。

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

data-標準の属性セーフ文字列（スペースや特殊文字を含まない英数字）を前に付けることにより、データ属性を作成できます。たとえば、data-idまたはこの場合data-reactid

Question 6

これがHTMLデータ属性です。詳細はこちらをご覧ください：http : //html5doctor.com/html5-custom-data-attributes/

基本的には、HTMLを有効にしながら、カスタムデータのコンテナーにすぎません。これにdata-加えて、いくつかの一意の識別子があります。