همه چیز در مورد 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 به عنوان والد استفاده میکنید ، اینکار را میکنید !

تفاوت 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 ری اکت