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

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

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

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

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

استفاده از React Fragment !

شما میتوانید از تگ <Fragment> به عنوان Wrapper برای اِلِمان های کامپوننت خود استفاده کنید.

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

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

export default App

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

لطفا برای مشاهده ادامه این آموزش تخصصی و حمایت از فِرانت اِندی ، ادامه آموزش را در فِرانت اِندی مطالعه کنید : ( توسط لینک زیر ):

آموزش Fragment در ری اکت

FrontEndi.com