همه چیز در مورد Fragment در React !
Tags: react, javascript, fragment, frontend
Published: 2023-09-16 13:04:53


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgom99coy31q2yb3e184.png)



زمانیکه نسخه 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 استفاده کرد ؟

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

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

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

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw6jg64a1i3yrtvdym0e.png)


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

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

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

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

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

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

برای مطالعه نسخه کامل و راستچین مقاله روی لینک زیر کلیک کنید : 
[Fragment در ری اکت](https://frontendi.com/react-fragment/)