همه چیز در مورد React Fragment

اگر شما یک توسعه دهنده React هستید و هنوز از React Fragments چیزی نشنیده اید و از آن استفاده نکردید ، این پست برای شما باشد. React Fragments ویژگی ای است که چندی پیش در React 16.2.0 معرفی شد.اما آنقدر که باید محبوب نیست. در این پست ، ما در مورد اینکه React Fragments چیست ، چگونگی استفاده از آن و چرا یک ویژگی عالی است ، می آموزیم.

React Fragments چیست؟

اگر مدتی توسعه دهنده React بوده اید ، احتمالاً قبلاً در چنین شرایطی قرار داشتید:

import React from "react";

export default () => (
    <h1>Hello I am heading one </h1>
    <h1>Hey there I am another heading </h1>
);

import React from "react";

export default () => (

<h1>Hello I am heading one </h1>

<h1>Hey there I am another heading </h1>

);

با render شدن و اجرای کد بالا شما یک error با عنوان Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag دریافت خواهید کرد.من بارها با این خطا روبرو شده ام و می دانم که یک کامپوننت React با چندین elements باید در چیزی شبیه به <div> قرار گیرد.

import React from "react";

export default () => (
    <div>
      <h1>Hello I am heading one </h1>
      <h1>Hey there I am another heading </h1>
    </div>
);

import React from "react";

export default () => (

<div>

<h1>Hello I am heading one </h1>

<h1>Hey there I am another heading </h1>

</div>

);

اضافه کردن یک <div> برای wrap کردن چندین element شما را از شر خطا خلاص می کند. این اتفاق در تمامی کامپوننت ها رخ می دهد ، هر وقت یک کامپوننت چندین element را برگرداند ، ما در نهایت آن را با یک <div> محصور می کنیم.

این نیاز توسط React منجر به تعدادی از نشانه های ناخواسته در سراسر DOM می شود و رفع اشکال آن دشوار است. بعضی اوقات حتی ممکن است منجر به render شدنHTML نامعتبر(invalid) شود.اینجا جایی است کهReact Fragments وارد می شوند. همان قطعه کد اکنون می توانید به جای <div> های غیر ضروری ، با استفاده از یک React Fragment ، به روز شوند.

React Fragments می تواند بدون اضافه کردن هیچ node اضافی به DOM لیستی از elements ها رو گروه بندی کند. اکنون می توانید به جای استفاده از عناصر واقعی مانند <div> ، از React Fragments که در DOM render نمی شود استفاده کنید.

import React from "react";

export default () => (
    <React.fragment>
      <h1>Hello I am heading one </h1>
      <h1>Hey there I am another heading </h1>
    </React.fragment>
);

import React from "react";

export default () => (

<React.fragment>

<h1>Hello I am heading one </h1>

<h1>Hey there I am another heading </h1>

</React.fragment>

);

همانطور که می بینید در مثال بالا ما هیچ error ای دریافت نمی کنیم و هیج <div> اضافی را render نمی کنیم.درعوض ما از fragments استفاده می کنیم که مانند عناصر نامرئی برای wrap کردن کامپوننت ها هستند.

مثالی از Rendering Invalid HTML

بیایید به یک مثال classic نگاه کنیم ، جایی که اضافه کردن <div> برای wrap کردن کامپوننت با چندین element در واقع می تواند به یک HTML نامعتبر منجر شود. بهترین مثال برای این کار استفاده از یک Table Component مشابه زیر است:

class TableComponent extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <HeaderComponent />
        </tr>
        <tr>
          <td>Adhithi Ravichandran/td>
          <td>React Fragments</td>
          <td>100</td>
        </tr>
      </table>
    );
  }
}

class TableComponent extends React.Component {

render() {

return (

<table>

<tr>

</tr>

<tr>

<td>Adhithi Ravichandran/td>

<td>React Fragments</td>

</tr>

</table>

);

}

آموزش جامع React Js

در مثال بالا ما یک TableComponent ایجاد کردیم که یک جدول را با عنوان و محتوا render میکند.عنوان جدول یک کامپوننت دیگر به نام HeaderComponent است.پس بهتر است که یک HeaderComponent ساده برای جدول خود ایجاد کنیم

class HeaderComponent extends React.Component {
  render() {
    return (
        <th>Author Name</th>
        <th>Blog Post Title</th>
        <th>Likes</th>
    );
  }
}

// error: Adjacent JSX elements must be wrapped in an enclosing tag.

class HeaderComponent extends React.Component {

render() {

return (

<th>Author Name</th>

<th>Blog Post Title</th>

<th>Likes</th>

);

}

// error: Adjacent JSX elements must be wrapped in an enclosing tag.

با نگاه اول همه چیز درست به نظر می رسد.ما میخواهیم چندین ستون برای عنوان جدول خود return کنیم اما react برای ما یک error بر می گرداند“Adjacent JSX elements must be wrapped in an enclosing tag.” زمانی که قصد داشته باشیم این error را با اضافه کردن یک <div > بر طرف کنیم، با یک مشکل جدید روبرو می شویم:invalid HTML.

class HeaderComponent extends React.Component {
  render() {
    return (
      <div>
        <th>Author Name</th>
        <th>Blog Post Title</th>
        <th>Likes</th>
     </div>
    );
  }

// error goes away, but this results in invalid HTML

class HeaderComponent extends React.Component {

render() {

return (

<div>

<th>Author Name</th>

<th>Blog Post Title</th>

<th>Likes</th>

</div>

);

}

// error goes away, but this results in invalid HTML

در این مثال ما تمامی element ها رو داخل یک <div> قرار دادیم اما در واقع یک <div> به صورت ناگهانی در وسط table’s HTML خواهد بود که باعث invalid HTML می شود.این یک مثال خیلی خوب برای نشان دادن مزایای استفاده از React Fragment است.

کدهای بروز شده با React Fragment

class HeaderComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <th>Author Name</th>
        <th>Blog Post Title</th>
        <th>Likes</th>
      </React.Fragment>
    );
  }

class HeaderComponent extends React.Component {

render() {

return (

<React.Fragment>

<th>Author Name</th>

<th>Blog Post Title</th>

<th>Likes</th>

</React.Fragment>

);

}

با قطعه کد بالا HeaderComponent ما فقط 3 تا عنوان برای ستون های جدول ما بر میگرداند و fragment جزئی از DOM ما نیست.این باعث می شود تا debugging مربوط به DOM بسیار ساده تر شود و هرگونه درهم و برهمی غیر ضروری را برطرف کند.

React Fragments Short Syntax

fragments می تواند با یک syntax کوتاه تر به جای استفاده و فراخوانی React.Fragments در همه زمان ها استفاده شود.

class HeaderComponent extends React.Component {
  render() {
    return (
      <>
        <th>Author Name</th>
        <th>Blog Post Title</th>
        <th>Likes</th>
      </>
    );
  }

class HeaderComponent extends React.Component {

render() {

return (

<th>Author Name</th>

<th>Blog Post Title</th>

<th>Likes</th>

</>

);

}

نکته : توجه داشته باشید که با short syntax شما نمی توانید key و attribute برای element تخصیص دهید.

نتیجه گیری

در این پست بلاگ در مورد React Fragments یاد گرفتیم

React Fragments را میتوان هر زمان که چندین element وجود دارد، استفاده کرد و آنها باید در یک enclosing tag قرار بگیرند
این یک جایگزین برای استفاده از <div> در صورت لزوم برای خلاص شدن از خطایی است که توسط React ایجاد می شود.
Fragments نامرئی هستند و به DOM اضافه نمی شوند.
DOM nodesبا یک element کمتر بهم زیخته می شوند، زمانی که شما به جای div از fragment استفاده می کنید.
Fragmentsها میتوانند key را به عنوان یک attribute قبول کنند.

منابع:

reactjs.org

بلاگ مشفق

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

مهران محبیان گفت:

ژانویه 30, 2020 در 9:32 ق.ظ

نوشته های بلاگ واقعا کیفیت خوبی دارند من چند موردی رو خوندم تشکر میکنم فقط کاش کمی سرعت لود سایت رو بالا ببرید
من از نت قوی استفاده میکنم اما کند هستن صفحاتتون

پاسخ
- مهدی گفت:
  
  ژانویه 30, 2020 در 11:32 ق.ظ
  
  سلام مهران عزیز.
  ممنون از نظر لطفت.در حال بررسی این مشکل هستیم و سعی میکنیم که سرعت لود سایت رو بالا ببریم تا شما عزیزان به مشکل نخورید
  
  پاسخ

React Fragments چیست؟

مثالی از Rendering Invalid HTML

کدهای بروز شده با React Fragment

React Fragments Short Syntax

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

ویژگی ها و قابلیت های جدید react 18

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

نگاه اولیه به React Server Component

React Higher Order Components چیست

5 React Best Practice که باید در سال 2020 یاد بگیرید

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ