React 16のフラグメントがコンテナーdivよりも優れているのはなぜですか？

React 16.2では、サポートの改善Fragmentsが追加されました。詳細については、Reactのブログ投稿（こちら）を参照してください。

私たちは皆、次のコードに精通しています。

render() {
  return (
    // Extraneous div element :(
    <div>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </div>
  );
}

はい、コンテナーdivが必要ですが、それほど大きな問題ではありません。

React 16.2では、周囲のコンテナーdivを回避するためにこれを行うことができます。

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

どちらの場合でも、内部要素を囲むコンテナー要素が必要です。

私の質問は、なぜ使用するFragmentことが望ましいですか？パフォーマンスに役立ちますか？もしそうなら、なぜですか？いくつかの洞察力を愛しています。

1. 少し高速で、メモリ使用量も少なくなります（追加のDOMノードを作成する必要はありません）。これは、非常に大きなツリーや深いツリーにのみ実際のメリットがありますが、アプリケーションのパフォーマンスは、多くの場合、1,000カットの死に苦しんでいます。これは1カット少ないです。
2. FlexboxやCSSグリッドなどの一部のCSSメカニズムには特別な親子関係がありdiv、途中にs を追加すると、論理コンポーネントを抽出する際に目的のレイアウトを維持することが難しくなります。
3. DOMインスペクターの煩雑さが軽減されます。:-)

このReactの問題には、他のいくつかの使用例の説明があります。フラグメントAPIを追加して、レンダーから複数のコンポーネントを返すことができるようにします

上記のすべての回答に加えて、もう1つの利点があります。コードの可読性、Fragmentコンポーネントは構文糖形式をサポートし<>ます。したがって、質問のコードは次のように簡単に記述できます。

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

ドキュメントによると、

<React.Fragment/>前のセクションの例のように、Reactでは、これは要素に対応します。（JSXを使用するNon-Reactフレームワークは、異なる何かにコンパイルされる場合があります。）

乱雑にならないでしょ？

フラグメント<Fragment>に提供keyする必要がある場合は、構文を使用する必要があることに注意してください。

• JSXではこれまで不可能であった追加機能
• セマンティックjsxマークアップの改善。ラッパー要素は、強制されているためではなく、必要なときに使用されます。
• 全体的なdomマークアップの減少（レンダリングパフォーマンスの向上とメモリオーバーヘッドの減少）

これは、ラッパー要素が必要ない場合と同じくらい簡単で、ラッパー要素を使用する必要はありません。要素を減らすことは素晴らしいことですが、最大の利点は、以前は不可能であった要素をjsxでレンダリングできることと、現在はオプションであるため、ラッパー要素にセマンティックな意味を追加できることです。

これは以前は不可能でした：

 <select>
    {this.renderOptions()}
 </select>

React 15の以下を見ると、ラッパー要素が必要かどうかはわかりません。

<span>
  <h1>Hello</h1>
  {this.getContent()}
</span>

divの代わりにreactjs.org docsの最も重要な必要性は、<Fragment> </Fragment>HTMLのセマンティクスを壊さないようにすることです。代わりにdivを使用すると<Fragment> </Fragment>、HTMLセマンティクスが壊れます。

htmlセマンティクスについて詳しく知る。クリック してください。また、フラグメントではなくdivを使用すると、HTMLが無効になる場合があります。たとえば、次のコードを見てください。

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

<table>
      <tr>
        <div>
          <td>Hello</td>
          <td>World</td>
        </div>
      </tr>
 </table>

フラグメントはこの問題を解決します。

1. を使用<React.Fragment>...</React.Fragment>すると、DOMにノードを追加することなく、JSX要素に親タグを追加できます。
2. 追加のdivタグをReact.Fragmentに置き換えることができます
3. 毎回React.Fragmentを書くのは長すぎる。React.Fragmentには、使用できる省略構文があります。です<>...</>.