反応フラグメントを使うとき

私は、反応で何かを書いた誰でも、誤りを得たと確信しますAdjacent JSX elements must be wrapped in an enclosing tag . 簡単に言えば、反応コンポーネントはそのルートで1つのHTML要素だけを持つことができます.それで、あなたが表示したいならばh2 タグとタグp 同じコンポーネント内のタグを何かにラップする必要があります.私が愛している理由の一部Svelte あなたがコンポーネントのルートで望むように多くの要素を置くことができます.)このエラーを解決するために、ほとんどの人がこうします.

const MyComponent = () =>  {
  return (
    <div>
      <h2>Title</h2>
      <p>Some text.</p>
    </div>
  )
}

export default MyComponent

しかし、問題は、あなたがちょうど多くのdiv sは非常に畳み込みのDOM出力を作成します.このイメージは、Facebookフィードの1つのポストからのコードを示します.

ものは、反応がこれを修理するのを助けることができるビルトイン構文であるということです.それは断片です.<> . あなたの代わりにそれを使用することができますdiv またはその他のHTMLタグ.したがって、上のコード例は次のようになります.

const MyComponent = () =>  {
  return (
    <>
      <h2>Title</h2>
      <p>Some text.</p>
    </>
  )
}

export default MyComponent

それで、あなたは断片を使うべきですか?ディスプレイ目的のためにDOM要素を必要としないときはいつでもフラグメントを使うべきです.DOM要素を使用する必要があるのは、スタイリングの目的や意味の必要性に必要なときだけですarticle 要素).
なぜこれが問題ですか.レンダリングされなければならなくて、再レンダリングの上で拡散しなければならないDOMがより少ないので、それはより速くありえます.また、現代のCSS機能flexbox and grid 少ない要素があるとき、非常によりよく働きます.