Mengapa Fragmen dalam React 16 lebih baik daripada div kontainer?

Dalam Bereaksi 16.2, dukungan yang ditingkatkan untuk Fragmentstelah ditambahkan. Informasi lebih lanjut dapat ditemukan di posting blog React di sini.

Kita semua akrab dengan kode berikut:

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

Ya, kami membutuhkan div kontainer, tapi itu bukan masalah besar.

Dalam Bereaksi 16.2, kita bisa melakukan ini untuk menghindari div kontainer di sekitarnya:

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

Dalam kedua kasus tersebut, kita masih membutuhkan elemen penampung yang mengelilingi elemen dalam.

Pertanyaan saya adalah, mengapa menggunakan yang Fragmentlebih disukai? Apakah itu membantu kinerja? Jika demikian, mengapa? Akan menyukai wawasan.

1. Ini sedikit lebih cepat dan memiliki lebih sedikit penggunaan memori (tidak perlu membuat simpul DOM tambahan). Ini hanya memiliki manfaat nyata pada pohon yang sangat besar dan / atau dalam, tetapi kinerja aplikasi sering menderita kematian dengan seribu tebasan. Ini satu potong lebih sedikit.
2. Beberapa mekanisme CSS seperti Flexbox dan CSS Grid memiliki hubungan orangtua-anak yang khusus, dan menambahkan divs di tengah membuatnya sulit untuk mempertahankan tata letak yang diinginkan saat mengekstraksi komponen logis.
3. Inspektur DOM tidak berantakan. :-)

Anda dapat menemukan deskripsi beberapa kasus penggunaan lain dalam masalah Bereaksi ini: Tambahkan API fragmen untuk memungkinkan pengembalian beberapa komponen dari render

Menambah semua jawaban di atas ada satu keuntungan lagi: keterbacaan kode , Fragmentkomponen mendukung bentuk gula sintaksis <>,. Dengan demikian kode dalam pertanyaan Anda dapat ditulis lebih mudah sebagai:

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

Menurut dokumen ,

Di Bereaksi, ini keinginan untuk <React.Fragment/>elemen, seperti pada contoh dari bagian sebelumnya. (Kerangka kerja Non-React yang menggunakan JSX dapat mengkompilasi ke sesuatu yang berbeda.)

Bebas kekacauan, bukan?

Perhatikan bahwa Anda masih perlu menggunakan <Fragment>sintaks jika Anda perlu memberikan keyfragmen.

• Fitur yang ditambahkan tidak mungkin dilakukan sebelumnya dengan JSX
• Markup JSX semantik yang lebih baik. Elemen pembungkus digunakan saat dibutuhkan bukan karena terpaksa.
• Keseluruhan dom markup (peningkatan kinerja render dan overhead memori lebih sedikit)

Ini sesederhana ketika Anda tidak membutuhkan elemen pembungkus Anda tidak dipaksa untuk menggunakannya. Memiliki elemen yang lebih sedikit itu bagus, tetapi saya pikir manfaat terbesar adalah mampu membuat elemen dalam JSX yang sebelumnya tidak mungkin dan menambahkan makna semantik yang lebih baik untuk elemen pembungkus karena mereka opsional sekarang.

Ini tidak mungkin dilakukan sebelumnya:

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

Melirik hal-hal berikut dalam Bereaksi 15 Anda tidak dapat mengetahui apakah elemen pembungkus diperlukan atau tidak:

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

Sesuai reactjs.org docs kebutuhan yang paling penting dari <Fragment> </Fragment>bukan div adalah untuk menghindari semantik HTML melanggar. Ketika kita menggunakan div, bukannya <Fragment> </Fragment>kita merusak semantik HTML.

Untuk mengetahui lebih lanjut tentang html semantik. silakan klik dan ada juga kasus di mana jika Anda menggunakan div bukan Fragmen itu akan menjadi html tidak valid, misalnya lihat kode ini:

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>

Fragmen memecahkan masalah ini.

1. Dengan menggunakan <React.Fragment>...</React.Fragment>, kita dapat menambahkan tag induk ke elemen JSX kami tanpa menambahkan simpul tambahan ke DOM.
2. Anda dapat mengganti tag div tambahan dengan React.Fragment
3. menulis React.Fragment setiap waktu terlalu lama untuk Anda. React.Fragment memiliki sintaks steno yang dapat Anda gunakan. ini<>...</>.