web-dev-qa-db-ja.com

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

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

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

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

javascripthtmlreactjs
89
Ayman El Temsahi

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

サーバーとクライアント間で実際のオブジェクト参照を共有する方法はありません。また、コンポーネントツリー全体のシリアル化されたバージョンを送信すると、コストがかかる可能性があります。アプリケーションがサーバーでレンダリングされ、Reactがクライアントでロードされるとき、アプリケーションが持つデータはdata-reactid属性のみです。

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

それを上記のデータ構造に変換できる必要があります。その方法は、一意のdata-reactid属性を使用することです。これはinflatingコンポーネントツリーと呼ばれます。

また、クライアント側でReactがレンダリングされると、参照を失う必要がない場合でも、data-reactid属性を使用することに気付くかもしれません。一部のブラウザでは、.innerHTMLを使用してアプリケーションをDOMに挿入し、パフォーマンスを向上させるためにコンポーネントツリーをすぐに拡張します。

もう1つの興味深い違いは、クライアント側でレンダリングされたReact idには増分整数形式（.0.1.4.3など）があり、サーバーでレンダリングされたものにはランダム文字列（.loqi70ccu80.1.4.3）。これは、アプリケーションが複数のサーバーにまたがってレンダリングされる可能性があり、衝突がないことが重要だからです。クライアント側にはレンダリングプロセスが1つしかありません。つまり、カウンターを使用して一意のIDを確保できます。

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

125
Dan Prince

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

ご覧ください： http://facebook.github.io/react/

35
Samuel G. P.

カスタムデータ属性 HTML5

私の答えにイアンのコメントを引用したい：

これは、要素に関するデータ（情報）を保存するために使用できる要素上の単なる属性（有効な属性）です。

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

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

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

11
Praveen

データ属性は通常、さまざまな相互作用に使用されます。通常、javascriptを使用します。サイトの動作に関する影響はなく、必要な目的に応じてデータを渡す便利な方法として機能します。以下に記事を整理します：

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

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

3
Kai Qing

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

基本的には、HTMLを有効にしたままのカスタムデータのコンテナーにすぎません。 data-といくつかの一意の識別子です。

3
Ben Gulapa