कंटेनर डिवीजनों की तुलना में प्रतिक्रिया 16 में फ्रेगमेंट बेहतर क्यों हैं?

Question

प्रतिक्रिया में 16.2, के लिए बेहतर समर्थन Fragmentsजोड़ा गया है। अधिक जानकारी यहां रिएक्ट के ब्लॉग पोस्ट पर पाई जा सकती है।

हम सभी निम्नलिखित कोड से परिचित हैं:

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

हाँ, हमें एक कंटेनर div की आवश्यकता है, लेकिन यह एक सौदे का बड़ा हिस्सा नहीं है।

प्रतिक्रिया 16.2 में, हम आसपास के कंटेनर div से बचने के लिए ऐसा कर सकते हैं:

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

या तो मामले में, हमें अभी भी एक आंतरिक तत्व के चारों ओर एक कंटेनर तत्व की आवश्यकता है।

मेरा सवाल है, क्यों एक Fragmentबेहतर उपयोग कर रहा है ? क्या यह प्रदर्शन में मदद करता है? यदि हां, तो क्यों? कुछ अंतर्दृष्टि पसंद करेंगे।

Comments

मुझे यह वास्तव में फ्लेक्सबॉक्स स्टाइल के लिए उपयोगी लगता है जब माता

— willwoo

इसके साथ समस्या divयह है कि आप हमेशा एक रैपर तत्व नहीं चाहते हैं। रैपर तत्वों का एक अर्थ होता है और आमतौर पर आपको उस अर्थ को हटाने के लिए अतिरिक्त शैलियों की आवश्यकता होती है। <Fragment>बस कृत्रिम चीनी है जो प्रदान नहीं की जाती है। रैपर बनाते समय ऐसे हालात होते हैं, उदाहरण के लिए एसवीजी में जहां <div>उपयोग नहीं किया जा सकता है और <group>हमेशा वह नहीं होता जो आप चाहते हैं।

— सुल्तान

Answer 1

1. यह थोड़ा तेज़ है और इसमें मेमोरी का उपयोग कम है (अतिरिक्त DOM नोड बनाने की आवश्यकता नहीं है)। यह केवल बहुत बड़े और / या गहरे पेड़ों पर एक वास्तविक लाभ है, लेकिन आवेदन प्रदर्शन अक्सर एक हजार कटौती से मौत से ग्रस्त है। यह एक कट कम है।
2. फ्लेक्सबॉक्स और सीएसएस ग्रिड जैसे कुछ सीएसएस तंत्रों का एक विशेष अभिभावक-बच्चा संबंध है, और divबीच में एस जोड़ने से तार्किक घटकों को निकालते समय वांछित लेआउट रखना मुश्किल हो जाता है।
3. DOM इंस्पेक्टर कम बरबाद होता है। :-)

आप इस प्रतिक्रिया मुद्दे में कुछ अन्य उपयोग के मामलों का वर्णन पा सकते हैं: रेंडर से कई घटकों को वापस करने की अनुमति देने के लिए टुकड़ा एपीआई जोड़ें

Comments

4. परिभाषा सूचियों को लिखना <dt><dd>बहुत आसान हो जाता है। पहले जोड़े गए तत्वों को लौटाना अजीब था Fragments।

— Sonson123

क्या प्रतिक्रिया-मूल में काम करते हैं? मैंने कोशिश की import Fragment from 'react'। लेकिन यह आरएन में अपरिभाषित है।

— बिन्चिक

हमारे लिए number 2टेबल वास्तव में सबसे बड़ी समस्या रही है। कुछ अजीब रिएक्ट कोड के लिए table>tr>td(संभवतः theadऔर समान) की आवश्यक संरचना ।

— मत्स्येमन

@binchik की कोशिश की import {Fragment} from 'react'? यह एक नामित निर्यात है।

— सोस्का

नंबर 3 सबसे महत्वपूर्ण है!

— जैच स्मिथ

Answer 2

उपरोक्त सभी उत्तरों को जोड़ने से एक और फायदा होता है: कोड पठनीयता , Fragmentघटक एक सिंटैक्टिक शुगर फॉर्म का समर्थन करता है <>,। इस प्रकार आपके प्रश्न का कोड अधिक आसानी से लिखा जा सकता है:

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

डॉक्स के अनुसार ,

प्रतिक्रिया में, यह एक <React.Fragment/>तत्व के लिए उतरता है , उदाहरण के लिए पिछले अनुभाग से। (जेएसएक्स का उपयोग करने वाले गैर-प्रतिक्रियात्मक ढांचे कुछ अलग करने के लिए संकलन कर सकते हैं।)

अव्यवस्था-मुक्त, है ना?

ध्यान दें कि <Fragment>अगर आप keyको टुकड़े को प्रदान करने की आवश्यकता है, तो भी आपको सिंटैक्स का उपयोग करने की आवश्यकता है ।

Comments

यह छोटा सिंटैक्स वर्तमान में क्रिएट-रिएक्शन-ऐप में अभी तक समर्थित नहीं है। संदर्भ: reactjs.org/docs/fragments.html#short-syntax

— codingsplash

@codingsplash CRA 2.0 अभी है।

— झवेरी

इस चीनी के टुकड़े को खड़ा नहीं किया जा सकता है, यह अनजाने में दिखता है और थोड़ा अंतर्निहित अर्थ बताता है। बहुत पसंद करते हैं<Fragment>

— ESR

@ESR व्यक्तिगत रूप से मुझे पसंद है। इस पर इस तरीके से विचार करें। बच्चों को कुछ भी नहीं लपेटा जाता है, जैसे <> में कुछ भी नहीं है। अदृश्य।

— user3614030

Answer 3

• जेएसएक्स के साथ इससे पहले जोड़ा गया फीचर संभव नहीं है
• बेहतर शब्दार्थ jsx मार्कअप। रैपर तत्वों का उपयोग तब किया जाता है जब जरूरत न हो क्योंकि उन्हें मजबूर किया जाता है।
• कम समग्र डोम मार्कअप (बढ़ा हुआ प्रदर्शन और कम मेमोरी ओवरहेड)

यह उतना ही सरल है जब आपको एक रैपर तत्व की आवश्यकता नहीं होती है जिसे आप एक का उपयोग करने के लिए मजबूर नहीं होते हैं। कम तत्व होने के कारण महान है, लेकिन मुझे लगता है कि सबसे बड़ा लाभ जेएसएक्स में उन तत्वों को प्रस्तुत करने में सक्षम हो रहा है जो पहले संभव नहीं थे और आवरण तत्वों के लिए बेहतर अर्थ अर्थ जोड़ना क्योंकि वे अब वैकल्पिक हैं।

यह पहले संभव नहीं था:

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

प्रतिक्रिया 15 में निम्नलिखित को देखते हुए आप यह नहीं बता सकते हैं कि आवरण तत्व की आवश्यकता है या नहीं:

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

Answer 4

Reajs.org के अनुसार, div के बजाय HTML के शब्दार्थ को तोड़ने से बचने के लिए डॉक्स की सबसे महत्वपूर्ण आवश्यकताएं <Fragment> </Fragment>हैं। जब हम div का उपयोग करते हैं तो हम <Fragment> </Fragment>HTML शब्दार्थ को तोड़ते हैं।

Html शब्दार्थ के बारे में अधिक जानने के लिए। कृपया क्लिक करें और ऐसे मामले भी हैं जहां यदि आप फ्रागमेंट के बजाय डिव का उपयोग करते हैं तो यह अमान्य HTML होगा, उदाहरण के लिए इस कोड को देखें:

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>

टुकड़े इस समस्या को हल करते हैं।

Answer 5

1. उपयोग करते हुए <React.Fragment>...</React.Fragment>, हम DOM पर एक अतिरिक्त नोड जोड़कर अपने JSX तत्वों के लिए एक पेरेंट टैग जोड़ सकते हैं।
2. आप React.Fragment के साथ अतिरिक्त div टैग बदल सकते हैं
3. React.Fragment लिखना हर बार आपके लिए बहुत लंबा होता है। React.Fragment में एक शॉर्टहैंड सिंटैक्स होता है जिसे आप उपयोग कर सकते हैं। यह है<>...</>.