<></><React.Fragment> の違い

React を学んでいると、時折 <></><React.Fragment> を混同することがあります。これらは、React で複数の要素を包むのに使用され、ほとんどの場合、<> のモダンな文法を使用します。簡単に言えば、ほぼ同じか同じです。


なぜ React.Fragment を使用するのですか?

React では通常、コンポーネントは 1 つの親要素でラップする必要があります。

  • Name
    <React.Fragment>
    Type
    Description

    この問題を解決するために、ReactはFragmentという概念を導入しました。Fragmentを使用すると、複数の要素をグループ化したり、親要素なしで複数の子要素を返したりできます。

  • Name
    <>
    Type
    Description

    <></> は React.Fragment の短縮構文です。

<React.Fragment>

function App() {
    return (
        <React.Fragment>
            <ChildA />
            <ChildB />
            <ChildC />
        </React.Fragment>
    );
}

<>

function App() {
    return (
        <>
            <ChildA />
            <ChildB />
            <ChildC />
        </>
    );
}

<><React.Fragment>の違い

これら 2 つの方法に機能的な違いはなく、ほとんど同じ機能を提供します。

  • Name
    キー・プロップス
    Type
    Description

    React.Fragmentはキー・プロップスをサポートしていますが、省略形の<></>はサポートしていません。したがって、mapなどのループ内でFragmentを使用する必要がある場合は、React.Fragmentが必要です。

  • Name
    開発者の好み
    Type
    Description

    一部の開発者は、<>...</>ではなく、<React.Fragment>...</React.Fragment>の方が読みやすいと感じるかもしれません。

  • Name
    互換性
    Type
    Description

    すべてのツールが省略記法をサポートしていない可能性があるため、互換性の問題が懸念される場合は、React.Fragmentを使用することがお勧めです。

<React.Fragment>

function List({ items }) {
    return items.map(item => (
        // key prop is needed when creating a list of elements
        <React.Fragment key={item.id}>
        {/* ... */}
        </React.Fragment>
    ));
}

結論

したがって、これら 2 つの方法からどちらを選択するかは、主にスタイルと個人の好みに依存します。

React Fragment または<></>を使用すると、DOM に追加のノードが生成されないため、パフォーマンスの利点があります。つまり、<div>や他の HTML タグで囲むよりも、<React.Fragment>を使用する方が効率的です。ただし、これは一般的なケースを指しており、常にそうであるわけではないため、状況に応じて適切に選択する必要があります。