همه چیز در مورد 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 قرار دهیم .
const X = (
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
);
اِلِمان h1 و P هیچ والدی ندارند. پس این کد در ری اکت به شما خطا خواهد داد .
const X = (
<div>
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
</div>
);
اِلِمان h1 و p یک والد دارند . پس این کد صحیح است .
در مثال زیر 2 کامپوننت داریم که یکی از آنها فاقد Wrapper ( والد ) است و دیگری از یک div به عنوان Wrapper ( والد ) استفاده کرده است :
const App = () => {
return (
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
);
}
export default App
نتیجه اجرای این کامپوننت SyntaxError است . زیرا اگر کامپوننت شما دارای چندین اِلِمان است ، باید تمام اِلِمان ها را درون یک اِلِمان پدر Wrap کنید.
const App = () => {
return (
<div> // من دور اِلِمان ها پیچیده شدم
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
</div>
);
}
export default App
اجرای این کامپوننت کاملا صحیح و بدون خطا خواهد بود .
چراکه اِلِمان های کامپوونت ، درون یک Wrapper قرار گرفته اند .
ویژگی 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 میکنید !
استفاده از React Fragment !
شما میتوانید از تگ <Fragment> به عنوان Wrapper برای اِلِمان های کامپوننت خود استفاده کنید.
به مثال زیر توجه کنید :
const App = () => {
return (
<Fragment>
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
</Fragment>
);
}
export default App
آز آنجایی که استفاده از Fragment هیچ تاثیری روی Style ندارد ، React.Fragment بسیار کاربردی و مفید است !
از Fragment بصورت <> هم میتوان استفاده کرد. به مثال زیر توجه کنید :
const App = () => {
return (
<>
<h1>من آیتم اول این کامپوننت هستم</h1>
<p>من آیتم دوم این کامپوننت هستم</p>
</>
);
}
export default App
استفاده از Fragment یا <> هیچ تفاوتی با یکدیگر ندارند و معادل هم هستند اما اگر نیاز دارید یک خصوصیت به آنها بدهید مثل key ، حتما از <Fragment> استفاده کنید . مثل <Fragment key={2}>
مزایای استفاده از Fragment در ری اکت
درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :
استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .
کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .
استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .
اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .
جمع بندی
استفاده از Fragment بجای div یا سایر تگ های مشابه به شما کمک میکند که کد های تمیزتر ، خواناتر و قابل نگهداری بنویسید و پروژه React استاندارد تری داشته باشید .
همچنین باهم بررسی کردیم که استفاده از div بعنوان Wrapper همیشه کار درستی نیست و علاوه بر کثیف کردن کد ، میتواند استایل های Css شمارا نیز بهم بریزد .
خیر !
استفاده از <div> به عنوان Wrapper ( والد ) در ری اکت کار درستی نیست.
ویژگی Fragment انتخاب بهتری است چراکه باعث افزایش خوانایی و تمیز بودن کد میشود . همچنین کامپوننت شما سریعتر رندر شده و از حافظه کمتری استفاده خواهد کرد . در نهایت حجم صفحه کمتر خواهد بود و سرعت بارگذاری صفحه بهتر خواهد شد .
خیر !
در واقع </> <> مخفف <Fragment> </Fragment> میباشد و هیچ تفاوتی بین این 2 نیست .
فقط درصورتیکه نیاز است به Fragment خود ویژگی هایی مثل Style یا Key بدهید ، باید از <Fragment> استفاده کنید .
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
ممنون از توضیحاتتون خیلی ساده و روون Fragment رو آموزش دادید
سلام و درود
خواهش میکنم بزرگوار نظر لطف شماست.
عالی، ممنون🙏👌
سلام خوشحالم که براتون مفید واقع شده 🙂
موفق باشی