رندر شرطی در React: بهترین روش ها و نمونه ها

ek3nk4r 2023-03-29

0 46 خواندن این مطلب 9 دقیقه زمان میبرد

رندر شرطی در React: بهترین روش ها و نمونه ها

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

React یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط های کاربری است و یکی از ویژگی های کلیدی آن امکان ارائه کامپوننت ها به صورت شرطی است. رندر شرطی به شما این امکان را می دهد که بر اساس شرایط خاصی مانند وضعیت برنامه یا ورودی کاربر، محتوای متفاوتی را برای کاربران نمایش دهید. این می تواند به ویژه برای ایجاد رابط های پویا که به تعاملات کاربر در زمان واقعی پاسخ می دهند مفید باشد.

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

چه یک مبتدی باشید که برای اولین بار React را یاد می‌گیرید یا یک توسعه‌دهنده با تجربه که به دنبال بهبود مهارت‌های خود هستید، درک نحوه رندر کردن کامپوننت‌ها به صورت شرطی یک مهارت ضروری برای ایجاد رابط‌های کاربری پویا و پاسخگو است. بنابراین، بیایید شروع کنیم!

فهرست مطالب

رندر شرطی پایه در React

در React می‌توانید عناصر را بر اساس یک مقدار بولی به صورت مشروط رندر کنید. این به این معنی است که اگر شرط درست باشد، می توانید یک مجموعه از عناصر را رندر کنید و اگر شرط نادرست باشد، می توانید مجموعه دیگری از عناصر را ارائه دهید. دو راه اصلی برای انجام این کار وجود دارد: استفاده از دستورات if/else یا استفاده از عملگرهای سه تایی.

استفاده از دستور if/else برای رندر شرطی:

می توانید از دستور if/else برای رندر شرطی عناصر در React استفاده کنید. در اینجا یک مثال است:

import React from 'react';

function MyComponent(props) {
  if (props.isVisible) {
    return <div>This is visible content</div>;
  } else {
    return <div>This is hidden content</div>;
  }
}

در این مثال، ما محتوای متفاوتی را بر اساس مقدار prop isVisible ارائه می‌دهیم. اگر isVisible درست باشد، عنصر “This isvisible content” و اگر نادرست باشد، عنصر “This is hidden content” را نمایش می دهیم.

استفاده از عملگرهای سه تایی برای رندر شرطی:

شما همچنین می توانید از عملگرهای سه تایی برای رندر شرطی عناصر در React استفاده کنید. در اینجا یک مثال است:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      {props.isVisible ? (
        <div>This is visible content</div>
      ) : (
        <div>This is hidden content</div>
      )}
    </div>
  );
}

در این مثال، ما از یک عملگر سه تایی برای ارائه مشروط محتوای مختلف بر اساس مقدار prop isVisible استفاده می کنیم. اگر isVisible درست باشد، عنصر “This isvisible content” و اگر نادرست باشد، عنصر “This is hidden content” را نمایش می دهیم.

هم دستور if/else و هم عملگرهای سه تایی راههای معتبری برای رندر شرطی عناصر در React هستند و اینکه کدام یک از آنها استفاده می کنید به ترجیح شخصی شما و پیچیدگی شرایطی که بررسی می کنید بستگی دارد. با این حال، شایان ذکر است که استفاده از عملگرهای سه تایی می تواند کد شما را مختصرتر و خواناتر کند، به خصوص برای شرایط ساده.

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

رندر شرطی با عملگرهای منطقی

علاوه بر رندر کردن عناصر بر اساس یک مقدار بولی منفرد، می توانید عناصر را بر اساس چندین مقدار بولی در React نیز به صورت شرطی رندر کنید. شما می توانید با استفاده از عملگرهای منطقی، مانند && و ||، برای ترکیب شرایط به این هدف برسید.

استفاده از && برای رندر شرطی:

می توانید از عملگر && برای رندر شرطی عناصر در React استفاده کنید. در اینجا یک مثال است:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      {props.isVisible && props.isEnabled ? (
        <div>This is visible and enabled content</div>
      ) : (
        <div>This is hidden or disabled content</div>
      )}
    </div>
  );
}

در این مثال، ما از عملگر && استفاده می کنیم تا بررسی کنیم که آیا هر دو props isVisible و isEnabled درست هستند یا خیر. در صورت وجود، عنصر «این محتوای قابل مشاهده و فعال است» را ارائه می‌کنیم و اگر نه، عنصر «این محتوای پنهان یا غیرفعال است» را ارائه می‌کنیم.

با استفاده از || برای رندر شرطی:

همچنین می توانید از || استفاده کنید عملگر برای رندر شرطی عناصر در React. در اینجا یک مثال است:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      {props.isError || props.isWarning ? (
        <div>This is an error or warning message</div>
      ) : (
        <div>This is a normal message</div>
      )}
    </div>
  );
}

در این مثال، ما از || استفاده می کنیم اپراتور برای بررسی اینکه آیا نشانه های isError یا isWarning درست هستند یا خیر. اگر یکی از آنها درست باشد، عنصر “This is an error or warning message” و اگر نه، عنصر “This is a normal message” را نمایش می دهیم.
استفاده از عملگرهای منطقی برای رندر شرطی می تواند زمانی بسیار مفید باشد که نیاز به بررسی همزمان چند شرط داشته باشید. با این حال، مهم است که به یاد داشته باشید که ترتیب عملیات هنگام استفاده از عملگرهای منطقی مهم است. به عنوان مثال، در مثال اول بالا، اگر props.isVisible نادرست باشد، شرط دوم props.isEnabled به هیچ وجه ارزیابی نمی شود، زیرا عملگر && ارزیابی را زمانی که شرط اول نادرست باشد، اتصال کوتاه می کند.

در بخش بعدی، نحوه استفاده از حالت کامپوننت برای رندر شرطی حتی پیشرفته تر در React را بررسی خواهیم کرد.

رندر شرطی با حالت جزء

در React نیز می توانید عناصر را بر اساس حالت کامپوننت به صورت شرطی رندر کنید. این به این معنی است که محتوایی که رندر می شود می تواند به صورت پویا بر اساس تغییرات در حالت مؤلفه تغییر کند. می‌توانید با استفاده از تابع setState() برای به‌روزرسانی وضعیت و راه‌اندازی رندرهای مجدد به این هدف برسید.

تنظیم حالت اولیه:

برای شروع، باید وضعیت اولیه کامپوننت خود را تنظیم کنید. در اینجا یک مثال است:

import React, { useState } from 'react';

function MyComponent(props) {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      {isVisible ? (
        <div>This is visible content</div>
      ) : (
        <div>This is hidden content</div>
      )}
    </div>
  );
}

در این مثال، ما از هوک useState() برای مقداردهی اولیه حالت isVisible به true استفاده می کنیم. سپس از حالت isVisible برای ارائه مشروط محتوای مختلف استفاده می کنیم.

به روز رسانی حالت با setState():

برای به روز رسانی وضعیت کامپوننت خود، باید از تابع setState() استفاده کنید. در اینجا یک مثال است:

import React, { useState } from 'react';

function MyComponent(props) {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? 'Hide' : 'Show'}
      </button>
      {isVisible ? (
        <div>This is visible content</div>
      ) : (
        <div>This is hidden content</div>
      )}
    </div>
  );
}

در این مثال، ما دکمه‌ای اضافه کرده‌ایم که با به‌روزرسانی وضعیت isVisible با استفاده از تابع setIsVisible() قابلیت مشاهده محتوای ما را تغییر می‌دهد. ما در حال ارسال یک تابع callback به رویداد onClick دکمه ای هستیم که toggleVisibility() را فراخوانی می کند. در داخل toggleVisibility()، ما از ! عملگر برای تغییر مقدار isVisible.

استفاده از حالت کامپوننت برای رندر شرطی می تواند بسیار قدرتمند باشد، زیرا به شما امکان می دهد رابط های کاربری پویا ایجاد کنید که بر اساس تعاملات کاربر یا رویدادهای دیگر تغییر می کنند. با این حال، مهم است که به یاد داشته باشید که فقط با استفاده از تابع setState() حالت را به روز کنید، زیرا به روز رسانی حالت مستقیم می تواند باعث رفتار غیرمنتظره و اشکالات شود.

در بخش بعدی، نحوه استفاده از props و state را برای رندر شرطی پیشرفته‌تر در React بررسی خواهیم کرد.

رندر شرطی با پروپ

در React، همچنین می‌توانید عناصر را براساس پروپ‌هایی که از مؤلفه‌های والد منتقل می‌شوند، به‌صورت مشروط رندر کنید. این امکان انعطاف پذیری و قابلیت استفاده مجدد بیشتر از اجزای شما را فراهم می کند.

انتقال وسایل:

برای شروع، باید لوازم مربوطه را از مؤلفه والد به مؤلفه فرزند منتقل کنید. در اینجا یک مثال است:

import React from 'react';

function MyParentComponent(props) {
  return <MyChildComponent isVisible={true} />;
}

function MyChildComponent(props) {
  return (
    <div>
      {props.isVisible ? (
        <div>This is visible content</div>
      ) : (
        <div>This is hidden content</div>
      )}
    </div>
  );
}

در این مثال، ما prop isVisible را با مقدار true از مؤلفه والد به مؤلفه فرزند منتقل می کنیم. سپس از prop isVisible برای ارائه مشروط محتوای مختلف استفاده می کنیم.

استفاده از props برای رندر شرطی:

برای استفاده از props برای رندر شرطی، باید در داخل مولفه فرزند به آنها دسترسی داشته باشید. در اینجا یک مثال است:

import React from 'react';

function MyParentComponent(props) {
  return <MyChildComponent isVisible={true} />;
}

function MyChildComponent(props) {
  return (
    <div>
      {props.isVisible ? (
        <div>This is visible content</div>
      ) : (
        <div>This is hidden content</div>
      )}
    </div>
  );
}

در این مثال، ما از prop isVisible برای ارائه مشروط محتوای مختلف در مولفه فرزند استفاده می‌کنیم.
استفاده از props برای رندر شرطی یک تکنیک قدرتمند است که به شما امکان می‌دهد دوباره از مؤلفه‌ها استفاده کنید و رفتار آنها را بر اساس زمینه‌ای که در آن استفاده می‌شود سفارشی کنید. مهم است که به یاد داشته باشید که لوازم مربوطه را در مؤلفه والد تعریف کنید و آنها را به مؤلفه فرزند منتقل کنید. به منظور استفاده از آنها برای رندر شرطی.

در بخش بعدی، نحوه ترکیب چندین تکنیک برای رندر شرطی پیشرفته تر در React را بررسی خواهیم کرد.

بهترین روش ها برای رندر شرطی در React

رندر شرطی می تواند ابزار قدرتمندی در React باشد، اما مهم است که از آن به گونه ای استفاده کنید که برای عملکرد سازماندهی شده و بهینه شده باشد. در اینجا برخی از بهترین روش‌ها وجود دارد که هنگام استفاده از رندر شرطی در مؤلفه‌های React خود باید رعایت کنید:

منطق رندر شرطی را جدا نگه دارید:

این یک تمرین خوب است که منطق رندر شرطی خود را از منطق اجزای دیگر خود جدا کنید. این کار خواندن و نگهداری کد شما را آسان‌تر می‌کند، به‌ویژه وقتی کامپوننت شما پیچیده‌تر می‌شود.

یکی از راه های انجام این کار این است که یک تابع یا متد جداگانه ایجاد کنید که حاوی منطق رندر شرطی شما باشد. مثلا:

function MyComponent(props) {
  const renderContent = () => {
    if (props.isLoading) {
      return <div>Loading...</div>;
    } else {
      return <div>Content goes here</div>;
    }
  };

  return (
    <div>
      {renderContent()}
    </div>
  );
}

در این مثال، ما یک تابع جداگانه به نام renderContent ایجاد کرده‌ایم که شامل منطق رندر شرطی ما است. سپس این تابع را در دستور بازگشت اصلی فراخوانی می کنیم تا محتوای خود را ارائه دهیم.

برای شرایط ساده از اتصال کوتاه استفاده کنید:

برای شرایط ساده ای که فقط به یک مقدار بولی نیاز دارند، استفاده از اتصال کوتاه به جای دستور if مختصرتر است. در اینجا یک مثال است:

function MyComponent(props) {
  return (
    <div>
      {props.isVisible && <div>Visible content</div>}
    </div>
  );
}

در این مثال، ما از اتصال کوتاه برای ارائه مشروط محتوای خود بر اساس مقدار props.isVisible استفاده می کنیم. اگر props.isVisible درست است، پس

عنصر ارائه خواهد شد. در غیر این صورت چیزی ارائه نمی شود.

از یادداشت برای بهینه سازی عملکرد استفاده کنید:

اگر منطق رندر کامپوننت شما گران است، می توانید از حافظه برای بهینه سازی عملکرد استفاده کنید. حافظه‌گذاری به شما امکان می‌دهد نتیجه فراخوانی تابع را بر اساس آرگومان‌های ورودی آن ذخیره کنید. این می تواند به ویژه برای منطق پیچیده رندر شرطی مفید باشد.

در اینجا یک مثال است:

import React, { useMemo } from 'react';

function MyComponent(props) {
  const renderContent = useMemo(() => {
    if (props.isVisible) {
      return <div>Visible content</div>;
    } else {
      return <div>Hidden content</div>;
    }
  }, [props.isVisible]);

  return (
    <div>
      {renderContent}
    </div>
  );
}

در این مثال، ما از قلاب useMemo برای به خاطر سپردن نتیجه عملکرد renderContent خود استفاده می کنیم. این بدان معنی است که اگر props.isVisible تغییر نکرده باشد، به جای محاسبه مجدد، از نتیجه محاسبه شده قبلی مجدداً استفاده خواهیم کرد.

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

نتیجه

در خاتمه، رندر شرطی ابزار قدرتمندی در React است که به شما این امکان را می دهد تا محتوای متفاوتی را بر اساس شرایط خاص به کاربران خود نمایش دهید. با استفاده از عبارات if/else، عملگرهای سه تایی، عملگرهای منطقی، حالت جزء و props، می توانید رابط های کاربری پویا و تعاملی ایجاد کنید که به ورودی کاربر و تغییرات داده پاسخ می دهد.

هنگام استفاده از رندر شرطی در مؤلفه‌های React، مهم است که بهترین روش‌ها را برای سازماندهی منطق و بهینه‌سازی عملکرد خود دنبال کنید. با جدا کردن منطق رندر شرطی خود از منطق اجزای دیگر، استفاده از اتصال کوتاه برای شرایط ساده و استفاده از حافظه‌گذاری برای بهینه‌سازی عملکرد، می‌توانید کد کارآمدتر و قابل نگهداری ایجاد کنید.

اگر به دنبال توسعه یک برنامه وب مبتنی بر React یا استخدام شرکت توسعه برنامه بومی react برای پروژه خود هستید، مهم است که تیمی را انتخاب کنید که در ساخت برنامه‌های React مقیاس‌پذیر و کارآمد تخصص داشته باشد. با مهارت ها و تجربه مناسب، یک توسعه دهنده React می تواند به شما کمک کند تا یک برنامه وب با کیفیت بالا بسازید که نیازهای کسب و کار شما را برآورده کند و از انتظارات کاربر شما فراتر رود.

به طور کلی، رندر شرطی ابزاری ضروری برای هر توسعه‌دهنده React است که به آن مسلط شود. با پیروی از بهترین شیوه ها و استفاده از قدرت React، می توانید رابط های کاربری پویا و جذابی ایجاد کنید که تجربه کاربری استثنایی را ارائه می دهد.

منابع

عناصر رندر – https://reactjs.org/docs/rendering-elements.html
React Hooks – https://dev.to/crossskatee1/react-hooks-a-comprehensive-guide-for-building-scalable-web-applications-27mn