[解決済み】React 16のFragmentは、なぜコンテナ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つ少ないカットです。
2. Flexbox や CSS Grid など一部の CSS 機構は特殊な親子関係を持っており、CSS Grid に親子関係を記述するために div を使用すると、論理的なコンポーネントを抽出する際に、目的のレイアウトを維持することが困難になります。
3. DOMインスペクタがごちゃごちゃしなくなった :-)

その他の使用例については、こちらのReact issueで解説しています。 レンダーから複数のコンポーネントを返せるようにフラグメント API を追加する。