ما هو العنصر الفارغ <> في react.js؟

يستخدم الوسم الفارغ  <> </> إختصاراً ل fragment الخاصية التي تمكنك من إضافة أكثر من عنصر بدون الحاجة لوضعهم بداخل عنصر واحد كالتالي

render() {
  return (
    <React.Fragment>
      <header />
      <main />
      <footer />
    </React.Fragment>
  );
}
//إختصاراً سنقوم بكتابة التالي
render() {
  return (
    <> 
		<header />
        <main />
        <footer />
    </>
  );
}

بينما إذا أردت تطبيق الكود بالأعلى بدون  <> </> سيظهر لك خطأ وستضطر لوضع ال header وال main و  ال footer بداخل عنصر واحد كالتالي

render() {
  return (
    <div> 
		<header />
        <main />
        <footer />
    </div>
  );
}

هذا كود مختصر للعنصر Fragment

return <React.Fragment> <Post/> <Post/> </React.Fragment>

// هذا كود مختصر للسطر السابق
return <> <Post/> <Post/> </>

يعتمد React على بناء هيكل الصفحة يشبه الشجرة ويستخدم العنصر Fragment عند إرجاع مكونات متعددة، فإن افتراض أن هذه الشجرة من العناصر سيكون لها عنصر جذر واحد (عنصر رئيسي) فإنه سيكون من الصعب معالجة هذه الشجرة من المكونات.

لذلك يجب أن يتم إرجاع عنصر واحد فقط ولحل هذه المشكلة يتم إستخدام العنصر React.Fragment لإحتواء كل العناصر الأخرى المرجعة، وهكذا يتم إرجاع عنصر واحد فقط.

لاحظ أنه من الإصدار 16.2 في React يمكن إرجاع مصفوفة Array من العناصر بدلًا من إستخدام العنصر React.Fragment بهذا الشكل:

return[
    <div> Div 1</div>,
    <div> Div 2</div>,
    <div> Div 3</div>,
    <div> Div 4</div>
  ];

كما تشير مستندات React.js ، فإن النمط الشائع في React هو أن تعيد المكونات عناصر متعددة. عادة ما يتم تغليف هذه العناصر على سبيل المثال داخل div. في معظم الحالات ، يكون الغلاف div "غير ذي صلة" ويتم إضافته فقط لأن مكونات React تتطلب منك إرجاع عنصر واحد فقط. ينتج عن هذا النوع من السلوك ترميز عديم الفائدة وأحيانًا يتم عرض HTML غير صالح ، وهو أمر سيء.

على سبيل المثال ، يمكن أن يكون لدينا جدول مكون يعرض جدول HTML وداخل هذا الجدول يتم تقديم الأعمدة بمكون آخر يسمى الأعمدة. من المحتمل أن يبدو شيء من هذا القبيل.

function Table(){
 return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );

}
 function Columns(){
 return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
}

قد يؤدي هذا إلى عرض HTML غير صالح لأن الغلاف div من مكون الأعمدة يتم عرضه داخل <tr>.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

الحل لهذا هو Fragment React  فهو يتيح تجميع قائمة من العناصر الفرعية دون إضافة عقد إضافية إلى DOM لأن الأجزاء لا تُعرض على DOM. لذلك نستخدم React.Fragment بشكل أساسي حيث نستخدم عادةً غلاف div.

function Columns(){
 return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
}

الآن سيعرض مكون الجدول HTML التالي:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

مرحباً @Adam Ebrahim
لنأخذ الموضوع ببساطة . هذا العنصر يسمى Fragment وهو عنصر خاص ب React ( وظيفته الأساسية هو أن يكون حاوية لجميع العناصر بداخله ) وإذا لاحظت ستجده شبيه بال div في ال html حيث أن العنصر لا معنى له مثل ( aside - header ) وهكذا 
في ماذا يختلف عن ال div ؟ الإختلاف هو أنه لا يقبل أي تنسيقات