همه چیز در مورد Fragment در React !

زمانیکه نسخه 16.2.0 ری اکت منتشر شد ، یک ویژگی جدید به اون اضافه شد به اسم React Fragment !

داستان انتشار Fragment در ری اکت، مثل داستان Strict Mode داستان یک مشکل بود که React Developer ها با اون درگیر بودن .

در حقیقت Fragment در ری اکت یکی از اون موضوعاتی هست که کمتر کسی تو React بهش توجه میکنه اما تو این مقاله میخوایم بصورت تخصصی React.Fragment رو بررسی کنیم.

دلیل استفاده از Fragment در ری اکت چیست ؟

کامپوننت هایی که در React ایجاد میکنیم از این 2 حالت خارج نیستند :

کامپوننت ما یک  Element  برمیگرداند ( Return میکند )
کامپوننت ما دو یا چند Element  برمیگرداند ( Return میکند )

در ری اکت ، اگر قصد داشته باشیم 2 یا چند Element برگردانیم ( Return کنیم ) باید تمامی آنها را داخل یک Element مثل div قرار دهیم .

ویژگی React.Fragment چیست ؟

قابلیت React Fragment به ما اجازه میدهد که چندین Element را از درون یک کامپوننت Return کنیم ( برگردانیم ).

ویژگی Fragment تمامی Element های درون خود را بصورت یک گروه در می آورد و آنرا Return میکند.

تا قبل از معرفی این ویژگی ، React Developer ها از div برای گروه بندی Element های یک کامپوننت استفاده میکردند که معایب بسیاری بهمراه داشت .

به مثال زیر توجه کنید :

const App = () => {
return (
<Fragment> // من دور اِلِمان ها پیچیده شدم
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
</Fragment>
);
}
export default App

از چه اِلِمان هایی به عنوان Wrapper در ری اکت میتوانیم استفاده کنیم؟

در ری اکت از اِلِمان های مختلفی مثل div , span , Fragment , <> و … میتوانیم به عنوان Wrapper استفاده کنیم .

اکثر توسعه دهنده های ری اکت همیشه از div به عنوان Wrapper استفاده میکنند ، اما اینکار اصلا درست نیست .
آیا میتوان از

اگر هدف شما از قرار دادن div به عنوان Wrapper ، افزون استایل است ( مثل hover ) هیچ مشکلی نیست و میتوانید از

اما اگر هدف شما برای استفاده از div ، صرفا بحث Wrapper بودن آن است ، قطعا انتخاب های بهتری هم وجود دارد و استفاده از div منطقی نیست .

استفاده از div به عنوان Wrapper خیلی اوغات میتواند مشکلاتی مثل بهم خوردن Style های Css را بهمراه داشته باشند مخصوصا زمانیکه از FlexBox و Grid استفاده میکنید .

به عنوان یک React Developer حرفه ای باید تمام تلاش خودتون رو بکنید که Element اضافی وارد DOM نکنید ! اما زمانیکه از div به عنوان والد استفاده میکنید ، اینکار را میکنید !
تفاوت Fragment با div در چیست ؟

Fragment باعث میشه تمامی div های اضافی از درخت DOM حذف بشه ، اما زمانیکه از div بجای Fragment استفاده میکنید نه تنها این اتفاق نمی افتد بلکه یک div اضافه هم وارد DOM میکنید !

مزایای استفاده از Fragment در ری اکت

درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :

استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .

کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .

استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .

اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .

برای مطالعه نسخه کامل و راستچین مقاله روی لینک زیر کلیک کنید :
Fragment در ری اکت