[解決済み] htmlのdata-reactid属性とは何ですか？

質問事項

いくつかのページのHTMLを調べていて、いくつかのページで "data-reactid" という属性が使われていることに気がつきました。

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

この属性は何ですか、そしてその機能は何ですか？

どのように解決するのですか？

その data-reactid 属性はカスタム属性で、以下のように使用されます。 リアクト は、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 属性があります。これは 膨張 コンポーネントツリー

また、React がクライアントサイドでレンダリングする場合、クライアントサイドでレンダリングするために data-reactid 属性は、その参照を失う必要はないにもかかわらず、です。ブラウザによっては、アプリケーションを DOM に挿入する際に .innerHTML を実行すると、パフォーマンス向上のため、コンポーネントツリーをすぐに展開します。

もう一つの興味深い違いは、クライアントサイドでレンダリングされたReactのidは、インクリメンタルな整数形式（例えば .0.1.4.3 一方、サーバーでレンダリングされたものは、ランダムな文字列がプレフィックスとして付きます（例えば .loqi70ccu80.1.4.3 ). これは、アプリケーションが複数のサーバーでレンダリングされる可能性があり、衝突が起こらないようにすることが重要だからです。クライアントサイドでは、レンダリングプロセスは 1 つだけなので、カウンターを使用して一意の ID を確保することができます。

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