Çfarë janë React Fragments dhe pse t'i përdorni?

Question

IT Interview Practice · Accepted Answer

Një komponent duhet të kthejë **një element bazë të vetëm**, por shpesh nuk dëshiron të shtosh një mbulim shtesë `

` vetëm për të përmbushur atë rregull (mund të thyejë pajimet CSS si fl/grid ose strukturat HTML si tabelat). Një **Fragment** grupon fëmijët **pa** shtuar asnjë nod DOM. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Nëse do të përdorje një `

` këtu në vend të kësaj, do të marrje HTML të pavlefshëm (`

…`), dhe tabela do të thyhet. Fragment-i përshkruan vetëm dy ``. ## Short vs full syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Përdore formën e plotë kur përcjellis një **listë fragmentesh**, pasi forma e shkurtër `<>` nuk mund të ketë një `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Pse kjo është e rëndësishme Fragment-et mbajnë DOM-in të pastër (nuk ka "supë wrapper div"), shmangen thyerjet e strukturave semantike/të ndjeshme ndaj planit dhe zvogëlojnë pak numrin e nödeve – gjithçka me zero kosto në kohën e ekzekutimit.

Short vs full syntax

Pse kjo është e rëndësishme

Pyetje të ngjashme