React Fragments ਕੀ ਹਨ ਅਤੇ ਉਨ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀ?

Question

IT Interview Practice · Accepted Answer

ਇੱਕ ਕਾਰਜ ਨੂੰ ਇੱਕ **ਸਿੰਗਲ root element** ਵਾਪਸ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ, ਪਰ ਤੁਸੀਂ ਅਕਸਰ ਸਿਰਫ ਉਸ ਨਿਯਮ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਇੱਕ ਵਾਧੂ wrapper `

` ਨਹੀਂ ਜੋੜਨਾ ਚਾਹੁੰਦੇ (ਇਹ CSS layouts ਜਿਵੇਂ fl/grid ਜਾਂ HTML structures ਜਿਵੇਂ tables ਨੂੰ ਤੋੜ ਸਕਦਾ ਹੈ)। ਇੱਕ **Fragment** ਬੱਚਿਆਂ ਨੂੰ ਗਰੁੱਪ ਕਰਦਾ ਹੈ **ਬਿਨਾਂ** ਕੋਈ DOM node ਸ਼ਾਮਲ ਕੀਤੇ। ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਥਾਂ ਵਿੱਚ `

` ਵਰਤਦੇ, ਤੁਹਾਨੂੰ ਅਵੈਧ HTML ਮਿਲਦਾ (`

…`), ਅਤੇ ਟੇਬਲ ਟੁੱਟ ਜਾਂਦਾ। Fragment ਸਿਰਫ ਦੋਵਾਂ ``ਸ ਰੇਂਡਰ ਕਰਦਾ ਹੈ। ## Short vs full syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Fragment ਦੀ ਇੱਕ **ਲਿਸਟ** ਨੂੰ ਰੇਂਡਰ ਕਰਦੇ ਸਮੇਂ full form ਵਰਤੋ, ਕਿਉਂਕਿ short `<>` ਇੱਕ `key` ਨਹੀਂ ਲੈ ਸਕਦਾ: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Fragments DOM ਨੂੰ ਸਾਫ ਰੱਖਦੇ ਹਨ (ਕੋਈ "wrapper div soup" ਨਹੀਂ), semantic/layout-sensitive structures ਨੂੰ ਤੋੜਨ ਤੋਂ ਬਚਾਉਂਦੇ ਹਨ, ਅਤੇ node ਦੀ ਗਿਣਤੀ ਨੂੰ ਥੋੜਾ ਘਟਾਉਂਦੇ ਹਨ – ਸਭ ਜ਼ੀਰੋ runtime cost ਨਾਲ।

Short vs full syntax

ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ