React Fragment: آنچه هر توسعه دهنده React باید بداند

واکنش به قطعات در نوامبر 2017 با معرفی شدند واکنش 16.2.0. اگرچه مدتی است که در این مکان حضور دارند ، اما بسیاری از توسعه دهندگان React از استفاده از آنها اجتناب می کنند یا بدون اینکه بدانند چه هستند از آنها استفاده می کنند. React Fragment یک ویژگی ورودی اما کلیدی است و هر توسعه دهنده React فارغ از سطح مهارت خود باید بر آنها تسلط داشته باشد. همچنین ، با توجه به مدت زمانی که آنها بخشی از React هستند ، دیگر نمی توان آنها را نادیده گرفت.

بنابراین ، بیایید با غواصی در Why ، What ، How و When ، هر آنچه برای تسلط بر React Fragment ها نیاز دارید را ببینیم.

چرا قطعات واکنش نشان می دهند وجود دارد

همانطور که در اسناد رسمی React، بازگشت بیش از یک عنصر HTML یک رفتار معمول مورد نظر برای اجزای React است. برای رسیدن به این هدف ، باید تمام این عناصر را با برچسب HTML بپیچید. زیرا React ایجاب می کند که اجزا فقط یک عنصر HTML را برگردانند. ساده ترین راه حل استفاده از لفاف است <div>. از نظر منطقی ، این اضافی است <div> معمولاً می تواند بی ربط تلقی شود ، اما عواقبی دارد. اول ، با استفاده مداوم از این روش ، شما DOM خود را تودرتو می کنید و در نتیجه سرعت ارائه را کاهش می دهید. دوم ، چنین روشی می تواند منجر به HTML نامعتبر شود ، همانطور که می خواهید ببینید.

به عنوان مثال ، بگذارید بگوییم شما یک Table کامپوننت که یک جدول HTML ارائه می دهد ، ستون های آن با یک جز component دیگر به نام رندر می شوند Columns. این کدی است که ممکن است برای این کار استفاده کنید:

function Table() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

function Columns() {
  return (
    
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

این امر منجر به ارائه HTML زیر می شود که نامعتبر است ، زیرا a <div> نمی تواند در کودکی ظاهر شود <tr>.

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

React Fragment ها دقیقاً برای حل این مشکل معرفی شدند.

Reaction Fragment چیست

React Fragment ها شامل یک نحو خاص است که به شما امکان می دهد لیستی از عناصر HTML را بدون افزودن گره های اضافی به DOM گروه بندی کنید. به عبارت دیگر ، React Fragment ها به شما امکان می دهد چندین مولفه فرزند را بدون وارد کردن علامت گذاری غیرضروری در HTML ارائه شده ، ارائه راه حل برای مسئله قبل و بسیاری از موارد دیگر ، گروه بندی کنید.

نحوه استفاده از آنها

با بسته بندی عناصر فرزند خود می توانید از React Fragment استفاده کنید تا توسط م componentلفه شما با یک برگردانده شود <React.Fragments> برچسب با بازگشت به مثال بالا ، Columns م componentلفه به شرح زیر نوشته می شود:

function Columns() {
  return (
    <React.Fragment>
      <td>Hello</td>
      <td>World</td>
    </React.Fragment>
  );
}

این باعث می شود Table م componentلفه ای که به HTML زیر ترجمه می شود:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

همانطور که مشاهده می کنید ، در HTML ارائه شده هیچ برچسب بسته بندی وجود ندارد. برخلاف آنچه قبلاً رخ داده است ، این امر منجر به HTML نامعتبر نمی شود.

React Fragment ها را می توان با یک نحو کوتاه که مانند یک برچسب خالی است نیز به کار برد:

function Columns() {
  return (
    
    <>
      <td>Hello</td>
      <td>World</td>
    </>
    
  );
}

این منجر به نتیجه ای مشابه مثال فوق می شود. بنابراین ، به یاد داشته باشید که برچسب خالی یک نوشتار کوتاه است <React.Fragment>.

چه موقع از آنها استفاده کنید

اساساً ، هر زمان که بسته بندی غیرضروری را معرفی می کنید ، باید از React Fragment استفاده کنید <div> برای اینکه م componentلفه شما بیش از یک عنصر HTML بازگرداند. بنابراین ، فکر Rect Fragment ها را به عنوان جایگزینی برای <div>در HTML شما وجود دارد. برعکس ، آنها را راهی برای جلوگیری از برچسب های غیرضروری و در نتیجه به دست آوردن یک ساختار نشانه گذاری بهتر بدانید.

سه مورد استفاده وجود دارد که معمولاً از React Fragment استفاده می شود. بیایید همه آنها را ببینیم.

1. بسته بندی چندین عنصر HTML

همانطور که حدس زده اید ، بسته بندی چندین عنصر HTML رایج ترین مورد استفاده از React Fragment ها است. هر زمان که بخواهید یک م componentلفه React را که باید چندین عنصر HTML را برگرداند تعریف کنید ، باید آنها را با <React.Fragment> یا <> برچسب همانطور که قبلاً مشاهده شد ، این روش پیشنهادی است ، زیرا استفاده از هر برچسب بسته بندی دیگری می تواند منجر به HTML نامعتبر شود.

بیایید هنگام تعریف مولفه ای که چهار عنصر HTML را بازگرداند ، آنها را در عمل ببینیم.

قلم را ببینید
Reaction Fragment ها مثال 1 توسط SitePoint (SitePoint)
بر CodePen.

2. قطعه های کلید دار

همانطور که در مستندات را واکنش نشان دهید، قطعات با صریح اعلام شده است <React.Fragment> نحو ممکن است کلید داشته باشد و این در هنگام کار با هر مجموعه JavaScript مفید است. لطفاً توجه داشته باشید که هنگام استفاده از نحو کوتاه اینگونه نیست.

به عنوان مثال ، فرض کنید شما یک آرایه از اشیا دارید که هر عنصر نماینده یک نویسنده است. هدف شما ارائه کلیه نویسندگان با استفاده از داده های موجود در این آرایه است. این می تواند با نگاشت هر عنصر آرایه به یک عنصر HTML مربوطه ، که React برای داشتن یک کلید منحصر به فرد مورد نیاز است. از آنجا که React Fragment از پشتیبان های اصلی پشتیبانی می کند ، می توانید بدون معرفی هیچ علامت گذاری اضافی ، آنها را مهار کنید. بیایید این را با یک مثال زنده ببینیم:

قلم را ببینید
Reaction Fragment ها مثال 2 توسط SitePoint (SitePoint)
بر CodePen.

3. ارائه مشروط

وقتی صحبت از ارائه مشروط می شود ، React از شما می خواهد که یک عنصر واحد را در هر دو شاخه برگردانید. این جایی است که React Fragment ها می توانند بازی کنند ، به شما این امکان را می دهد که به راحتی گروه عناصر را رندر کنید و از اضافه کردن برچسب های اضافی غیر ضروری جلوگیری کنید ، مانند مثال زیر:

قلم را ببینید
Reaction Fragment ها مثال 3 توسط SitePoint (SitePoint)
بر CodePen.

نتیجه

در این مقاله ، ما React Fragment ها را بررسی کردیم و اینکه چرا آنها یک ویژگی اجتناب ناپذیر هستند که هر توسعه دهنده React باید از آن تبحر داشته باشد. Fragment ها به شما امکان می دهند تا از قرار دادن موارد غیرضروری ، ساختار DOM بهتری را طراحی كنید <div>s همچنین ، یک ساختار نشانه گذاری تمیزتر به معنی زمان رندر کوتاهتر است ، که یک اثر جانبی عالی است. بعلاوه ، React Fragment ها در هر دو نحو ممکن به شما امکان می دهند متن متناسب با آن کد تمیزتر ، قابل نگهداری و خواندنی بنویسید.

با تشکر برای خواندن امیدوارم که این مقاله برای شما مفید واقع شده باشد. در صورت تمایل به به من برسید با هر گونه س questionsال ، نظر یا پیشنهاد.