React Fragment: Süvaülevaade mitme elemendi tagastamisest ja virtuaalsetest elementidest

Reacti arendusmaailma süvenedes puutute paratamatult kokku spetsiifilise, pealtnäha kummalise veateatega: "Kõrvuti asetsevad JSX-elemendid peavad olema ümbritsetud ümbris-tag'iga." Paljude arendajate jaoks on see esimene kokkupuude ühe JSX-i põhireegliga: komponendi render meetod või funktsionaalse komponendi tagastuslause peab omama ühte juurelementi.

Ajalooliselt oli levinud lahendus elementide grupi mähkimine neid sisaldavasse <div>-i. Kuigi see töötab, tekitab see peene, kuid olulise probleemi, mida tuntakse kui "ümbriste põrgu" või "div-iit". See risustab dokumendi objektimudelit (DOM) ebavajalike sõlmedega, mis võib põhjustada paigutusprobleeme, stiilikonflikte ja kerget jõudluse langust. Õnneks pakkus Reacti meeskond elegantse ja võimsa lahenduse: React Fragments.

See põhjalik juhend uurib React Fragmente algusest peale. Me avastame, millist probleemi nad lahendavad, õpime nende süntaksit, mõistame nende mõju jõudlusele ja avastame praktilisi kasutusjuhtumeid, mis aitavad teil kirjutada puhtamaid, tõhusamaid ja paremini hooldatavaid Reacti rakendusi.

Põhiprobleem: Miks React nõuab ühte juurelementi

Enne kui saame lahendust hinnata, peame probleemi täielikult mõistma. Miks ei saa Reacti komponent lihtsalt tagastada kõrvuti asetsevate elementide loendit? Vastus peitub selles, kuidas React ehitab ja haldab oma virtuaalset DOM-i ning komponendi mudelit ennast.

Komponentide ja lepitusprotsessi (Reconciliation) mõistmine

Mõelge Reacti komponendist kui funktsioonist, mis tagastab osa kasutajaliidesest. Kui React renderdab teie rakenduse, ehitab see nendest komponentidest puu. Et kasutajaliidest olekumuutuste korral tõhusalt uuendada, kasutab React protsessi, mida nimetatakse lepituseks (reconciliation). See loob kerge, mälus oleva esituse kasutajaliidesest, mida nimetatakse virtuaalseks DOM-iks. Uuenduse toimumisel loob see uue virtuaalse DOM-i puu ja võrdleb seda (protsess, mida nimetatakse "diffing") vanaga, et leida minimaalne muudatuste hulk, mis on vajalik tegeliku brauseri DOM-i uuendamiseks.

Et see "diffing"-algoritm töötaks tõhusalt, peab React käsitlema iga komponendi väljundit ühe, sidusa üksuse või puusõlmena. Kui komponent tagastaks mitu tipptaseme elementi, oleks see mitmetähenduslik. Kuhu see elementide rühm vanempuusse sobib? Kuidas React jälgib neid lepitusprotsessi ajal ühe üksusena? Kontseptuaalselt on lihtsam ja algoritmiliselt tõhusam omada iga komponendi renderdatud väljundi jaoks ühte sisenemispunkti.

Vana viis: ebavajalik <div> ümbris

Vaatleme lihtsat komponenti, mis on mõeldud pealkirja ja lõigu renderdamiseks.

            // See kood viskab vea!
const ArticleSection = () => {
  return (
    <h2>Probleemi mõistmine</h2>
    <p>See komponent üritab tagastada kahte kõrvuti asetsevat elementi.</p>
  );
};

            

              
                Copy
              
            
          

Ülaltoodud kood on vigane. Selle parandamiseks oli traditsiooniline lähenemine selle mähkimine <div>-i:

            // Vana, toimiv lahendus
const ArticleSection = () => {
  return (
    <div>
      <h2>Probleemi mõistmine</h2>
      <p>See komponent on nüüd kehtiv.</p>
    </div>
  );
};

            

              
                Copy
              
            
          

See lahendab vea, kuid sellel on oma hind. Uurime selle lähenemise puudusi.

Ümbris-div'ide puudused

• DOM-i paisumine: Väikeses rakenduses on mõned lisanduvad <div> elemendid kahjutud. Kuid suures, sügavalt pesastatud rakenduses võib see muster lisada DOM-i sadu või isegi tuhandeid ebavajalikke sõlmi. Suurem DOM-i puu tarbib rohkem mälu ja võib aeglustada DOM-i manipuleerimist, paigutuse arvutusi ja renderdamisaega brauseris.
• Stiili- ja paigutusprobleemid: See on sageli kõige otsesem ja frustreerivam probleem. Kaasaegsed CSS-paigutused nagu Flexbox ja CSS Grid sõltuvad suuresti otsestest vanem-laps suhetest. Lisanduv ümbris-<div> võib teie paigutuse täielikult rikkuda. Näiteks kui teil on flex-konteiner, ootate, et selle otsesed lapsed oleksid flex-elemendid. Kui iga laps on komponent, mis tagastab oma sisu <div>-i sees, saab sellest <div>-ist flex-element, mitte selle sees olev sisu.
• Vigane HTML-semantika: Mõnikord on HTML-i spetsifikatsioonil ranged reeglid selle kohta, millised elemendid võivad olla teiste lasteks. Klassikaline näide on tabel. <tr> (tabelirida) võib otseste lastena omada ainult <th> või <td> elemente (tabelilahtreid). Kui loote komponendi veergude komplekti (<td>) renderdamiseks, põhjustab nende mähkimine <div>-i vigase HTML-i, mis võib põhjustada renderdusvigu ja juurdepääsetavusprobleeme.

Vaatleme seda Columns komponenti:

            const Columns = () => {
  // See toodab vigase HTML-i: <tr><div><td>...</td></div></tr>
  return (
    <div>
      <td>Andmelaht 1</td>
      <td>Andmelaht 2</td>
    </div>
  );
};

const Table = () => {
  return (
    <table>
      <tbody>
        <tr>
          <Columns />
        </tr>
      </tbody>
    </table>
  );
};

            

              
                Copy
              
            
          

See on täpselt see probleemide kogum, mille lahendamiseks React Fragments loodi.

Lahendus: `React.Fragment` ja virtuaalsete elementide kontseptsioon

React Fragment on spetsiaalne, sisseehitatud komponent, mis võimaldab teil grupeerida laste loendit ilma DOM-i lisasõlmi lisamata. See on "virtuaalne" või "kummitus"-element. Võite mõelda sellest kui ümbrisest, mis eksisteerib ainult Reacti virtuaalses DOM-is, kuid kaob, kui lõplik HTML brauseris renderdatakse.

Täielik süntaks: `<React.Fragment>`

Refaktoreerime meie eelmised näited, kasutades Fragmentide täielikku süntaksit.

Meie ArticleSection komponent muutub:

            import React from 'react';

const ArticleSection = () => {
  return (
    <React.Fragment>
      <h2>Probleemi mõistmine</h2>
      <p>See komponent tagastab nüüd kehtiva JSX-i ilma ümbris-div'ita.</p>
    </React.Fragment>
  );
};

            

              
                Copy
              
            
          

Kui see komponent renderdatakse, on tulemuseks olev HTML:

            <h2>Probleemi mõistmine</h2>
<p>See komponent tagastab nüüd kehtiva JSX-i ilma ümbris-div'ita.</p>

            

              
                Copy
              
            
          

Pange tähele igasuguse konteinerelemendi puudumist. <React.Fragment> on teinud oma töö, grupeerides elemendid Reacti jaoks ja seejärel kadunud, jättes maha puhta, lameda DOM-struktuuri.

Samamoodi saame parandada meie tabelikomponenti:

            import React from 'react';

const Columns = () => {
  // Nüüd toodab see kehtiva HTML-i: <tr><td>...</td><td>...</td></tr>
  return (
    <React.Fragment>
      <td>Andmelaht 1</td>
      <td>Andmelaht 2</td>
    </React.Fragment>
  );
};

            

              
                Copy
              
            
          

Renderdatud HTML on nüüd semantiliselt korrektne ja meie tabel kuvatakse ootuspäraselt.

Süntaktiline suhkur: lühike süntaks `<>`

<React.Fragment> kirjutamine võib tunduda nii tavalise ülesande jaoks pisut sõnaohter. Arendajakogemuse parandamiseks tutvustas React lühemat ja mugavamat süntaksit, mis näeb välja nagu tühi tag: `<>...</>`.

Meie ArticleSection komponenti saab kirjutada veelgi lühemalt:

            const ArticleSection = () => {
  return (
    <>
      <h2>Probleemi mõistmine</h2>
      <p>See on lühikese süntaksiga veelgi puhtam.</p>
    </>
  );
};

            

              
                Copy
              
            
          

See lühike süntaks on enamikul juhtudel funktsionaalselt identne <React.Fragment>-iga ja on eelistatud meetod elementide grupeerimiseks. Siiski on üks oluline piirang.

Peamine piirang: Millal ei saa lühikest süntaksit kasutada

Lühike süntaks `<>` ei toeta atribuute, täpsemalt key atribuuti. Atribuut key on hädavajalik, kui renderdate elementide loendit massiivist. React kasutab võtmeid, et tuvastada, millised elemendid on muutunud, lisatud või eemaldatud, mis on kriitilise tähtsusega tõhusate uuenduste ja komponendi oleku säilitamise jaoks.

PEATE kasutama täielikku `<React.Fragment>` süntaksit, kui peate fragmendile endale andma `key`.

Vaatame stsenaariumi, kus see on vajalik. Kujutage ette, et meil on massiiv terminitest ja nende definitsioonidest ning me tahame neid renderdada definitsiooniloendis (<dl>). Iga termin-definitsioon paar peaks olema grupeeritud.

            const glossary = [
  { id: 1, term: 'API', definition: 'Application Programming Interface' },
  { id: 2, term: 'DOM', definition: 'Document Object Model' },
  { id: 3, term: 'JSX', definition: 'JavaScript XML' }
];

const GlossaryList = ({ terms }) => {
  return (
    <dl>
      {terms.map(item => (
        // Fragment on vajalik dt ja dd grupeerimiseks.
        // Loendi elemendi jaoks on vaja võtit.
        // Seetõttu peame kasutama täielikku süntaksit.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
};

// Kasutus:
// <GlossaryList terms={glossary} />

            

              
                Copy
              
            
          

Selles näites ei saa me iga <dt> ja <dd> paari mähkida <div>-i, sest see oleks <dl> sees vigane HTML. Ainus kehtiv lastena on <dt> ja <dd>. Fragment on ideaalne lahendus. Kuna me itereerime üle massiivi, nõuab React iga loendi elemendi jaoks unikaalset key-d, et seda jälgida. Me anname selle võtme otse <React.Fragment> tag'ile. Püüe kasutada <key={item.id}> tooks kaasa süntaksivea.

Fragmentide kasutamise mõju jõudlusele

Kas Fragmentid tegelikult parandavad jõudlust? Vastus on jah, kuid on oluline mõista, kust see kasu tuleb.

Fragmendi jõudluseelis ei seisne selles, et see renderdab kiiremini kui <div> – Fragment ei renderda üldse. Kasu on kaudne ja tuleneb tulemusest: väiksem ja vähem sügavalt pesastatud DOM-puu.

• Kiirem brauseri renderdamine: Kui brauser saab HTML-i, peab see selle parssima, ehitama DOM-puu, arvutama paigutuse (reflow) ja joonistama pikslid ekraanile. Väiksem DOM-puu tähendab brauserile vähem tööd kõigis nendes etappides. Kuigi ühe Fragmendi erinevus on mikroskoopiline, võib kumulatiivne mõju keerulises rakenduses tuhandete komponentidega olla märgatav.
• Vähendatud mälutarve: Iga DOM-sõlm on objekt brauseri mälus. Vähem sõlmi tähendab teie rakenduse jaoks väiksemat mälujalajälge.
• Tõhusamad CSS-selektorid: Lihtsamaid, lamedamaid DOM-struktuure on brauseri CSS-mootoril lihtsam ja kiirem stiilida. Keerulised, sügavalt pesastatud selektorid (nt `div > div > div > .my-class`) on vähem jõudsad kui lihtsamad.
• Kiirem Reacti lepitusprotsess (teoreetiliselt): Kuigi peamine kasu on brauseri DOM-ile, tähendab veidi väiksem virtuaalne DOM ka seda, et Reactil on lepitusprotsessi ajal marginaalselt vähem sõlmi, mida võrrelda. See mõju on üldiselt väga väike, kuid aitab kaasa üldisele tõhususele.

Kokkuvõttes ärge mõelge Fragmentidest kui maagilisest jõudluse kuulist. Mõelge neist kui parimast praktikast terve ja saleda DOM-i edendamiseks, mis on suure jõudlusega veebirakenduste ehitamise nurgakivi.

Täpsemad kasutusjuhud ja parimad praktikad

Lisaks lihtsalt mitme elemendi tagastamisele on Fragmentid mitmekülgne tööriist, mida saab rakendada mitmetes teistes levinud Reacti mustrites.

1. Tingimuslik renderdamine

Kui peate tingimuslikult renderdama mitme elemendi plokki, võib Fragment olla puhas viis nende grupeerimiseks ilma ümbris-<div>-i lisamata, mida ei pruugi vaja minna, kui tingimus on väär.

            const UserProfile = ({ user, isLoading }) => {
  if (isLoading) {
    return <p>Profiili laadimine...</p>;
  }

  return (
    <>
      <h1>{user.name}</h1>
      {user.bio && <p>{user.bio}</p>} {/* Üks tingimuslik element */}
      
      {user.isVerified && (
        // Mitme elemendiga tingimuslik plokk
        <>
          <p style={{ color: 'green' }}>Verifitseeritud kasutaja</p>
          <img src="/verified-badge.svg" alt="Verifitseeritud" />
        </>
      )}
    </>
  );
};

            

              
                Copy
              
            
          

2. Kõrgema järgu komponendid (HOC-id)

Kõrgema järgu komponendid on funktsioonid, mis võtavad komponendi ja tagastavad uue komponendi, sageli mähkides originaali, et lisada mingit funktsionaalsust (nagu andmeallikaga ühendumine või autentimise haldamine). Kui see mähkimisloogika ei nõua spetsiifilist DOM-elementi, on Fragmendi kasutamine ideaalne, mitte-pealetükkiv valik.

            // HOC, mis logib, kui komponent mountitakse
const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Komponent ${WrappedComponent.name} mountiti.`);
    }

    render() {
      // Fragmendi kasutamine tagab, et me ei muuda
      // mähitud komponendi DOM-struktuuri.
      return (
        <React.Fragment>
          <WrappedComponent {...this.props} />
        <React.Fragment>
      );
    }
  };
};

            

              
                Copy
              
            
          

3. CSS Grid ja Flexbox paigutused

Seda tasub korrata konkreetse näitega. Kujutage ette CSS Grid paigutust, kus soovite, et komponent väljastaks mitu grid-elementi.

CSS:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

            

              
                Copy
              
            
          

Reacti komponent (vale viis):

            const GridItems = () => {
  return (
    <div> {/* See lisanduv div muutub üheks grid-elemendiks */}
      <div className="grid-item">Element 1</div>
      <div className="grid-item">Element 2</div>
    </div>
  );
};

// Kasutus: <div className="grid-container"><GridItems /></div>
// Tulemus: Täidetakse üks veerg, mitte kaks.

            

              
                Copy
              
            
          

Reacti komponent (õige viis Fragmentidega):

            const GridItems = () => {
  return (
    <> {/* Fragment kaob, jättes maha kaks otsest last */}
      <div className="grid-item">Element 1</div>
      <div className="grid-item">Element 2</div>
    </>
  );
};

// Kasutus: <div className="grid-container"><GridItems /></div>
// Tulemus: Täidetakse kaks veergu, nagu ette nähtud.

            

              
                Copy
              
            
          

Kokkuvõte: väike funktsioon suure mõjuga

React Fragments võib tunduda väikese funktsioonina, kuid see kujutab endast fundamentaalset parandust viisis, kuidas me Reacti komponente struktureerime. Need pakuvad lihtsa, deklaratiivse lahenduse levinud struktuursele probleemile, võimaldades arendajatel kirjutada komponente, mis on puhtamad, paindlikumad ja tõhusamad.

Fragmente omaks võttes saate:

• Täita ühe juurelemendi reeglit ilma ebavajalikke DOM-sõlmi lisamata.
• Vältida DOM-i paisumist, mis viib parema üldise rakenduse jõudluse ja väiksema mälujalajäljeni.
• Vältida CSS-i paigutuse ja stiiliprobleeme, säilitades vajadusel otsesed vanem-laps suhted.
• Kirjutada semantiliselt korrektset HTML-i, parandades juurdepääsetavust ja SEO-d.

Pidage meeles lihtsat rusikareeglit: kui peate tagastama mitu elementi, kasutage lühikest süntaksit `<>`. Kui olete tsüklis või map-funktsioonis ja peate määrama `key`, kasutage täielikku `<React.Fragment key={...}>` süntaksit. Selle väikese muudatuse muutmine oma arendustöövoo regulaarseks osaks on oluline samm kaasaegse ja professionaalse Reacti arenduse meisterlikkuse suunas.