رندر شرطی
رندر شرطی در ری‌اکت (React) یک تکنیک حیاتی است که به توسعه‌دهندگان امکان می‌دهد تا رابط کاربری (UI) را به صورت داینامیک و بر اساس وضعیت برنامه، داده‌ها یا شرایط خاص تغییر دهند. این قابلیت برای ساخت برنامه‌های مدرن وب و اپلیکیشن‌های تک‌صفحه‌ای (SPA) اهمیت زیادی دارد زیرا تجربه کاربری را بهبود می‌بخشد و امکان نمایش یا مخفی کردن کامپوننت‌ها را بدون رفرش صفحه فراهم می‌کند.
در ری‌اکت، رندر شرطی معمولاً با استفاده از عملگرهای ternary، Logical AND (&&)، یا توابعی که کامپوننت‌های متفاوت را بازمی‌گردانند، پیاده‌سازی می‌شود. این تکنیک با مفاهیم کلیدی ری‌اکت مانند کامپوننت‌ها، مدیریت حالت (state management)، جریان داده‌ها و lifecycle کامپوننت‌ها ارتباط مستقیم دارد. در این آموزش، شما خواهید آموخت که چگونه رندر شرطی را برای ایجاد رابط‌های کاربری مانند نمایش پیغام خوش‌آمدگویی، فرم‌های ورود/خروج و لیست اعلان‌ها به‌صورت داینامیک استفاده کنید.
همچنین به بررسی بهترین شیوه‌ها، تکنیک‌های بهینه‌سازی عملکرد و اشتباهات رایج مانند Prop Drilling و رندرهای غیرضروری پرداخته می‌شود. پس از مطالعه این آموزش، توسعه‌دهندگان قادر خواهند بود که منطق پیچیده UI را به‌صورت قابل نگهداری و بهینه پیاده‌سازی کنند و برنامه‌های ری‌اکت مقیاس‌پذیر بسازند.
مثال پایه
jsximport React, { useState } from 'react';
function UserGreeting() {
return <h2>خوش آمدید!</h2>;
}
function GuestGreeting() {
return <h2>لطفاً وارد شوید.</h2>;
}
function Greeting() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const toggleLogin = () => {
setIsLoggedIn(prev => !prev);
};
return ( <div>
{isLoggedIn ? <UserGreeting /> : <GuestGreeting />} <button onClick={toggleLogin}>
{isLoggedIn ? 'خروج' : 'ورود'} </button> </div>
);
}
export default Greeting;در این مثال، رندر شرطی به کمک ternary operator پیاده‌سازی شده است. کامپوننت UserGreeting زمانی نمایش داده می‌شود که isLoggedIn برابر با true باشد و در غیر این صورت GuestGreeting نشان داده می‌شود. کامپوننت Greeting از useState برای مدیریت وضعیت ورود کاربر استفاده می‌کند و با تابع toggleLogin وضعیت را تغییر می‌دهد.
این روش از Prop Drilling جلوگیری می‌کند و کامپوننت‌ها را قابل استفاده مجدد می‌کند. جریان داده‌ها یک‌طرفه است و کامپوننت والد state را نگه می‌دارد و در صورت نیاز به فرزند می‌فرستد. توسعه‌دهندگان تازه‌کار گاهی اشتباه می‌کنند و از if statements مستقیم در JSX استفاده می‌کنند، اما JSX تنها expressionها را قبول می‌کند، بنابراین ternary و logical operators بهترین شیوه هستند.
مثال کاربردی
jsximport React, { useState, useEffect } from 'react';
function Notifications({ messages }) {
if (!messages.length) return null;
return ( <ul>
{messages.map((msg, idx) => ( <li key={idx}>{msg}</li>
))} </ul>
);
}
function Dashboard() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [notifications, setNotifications] = useState([]);
useEffect(() => {
if (isLoggedIn) {
setTimeout(() => {
setNotifications(['یک اعلان جدید دریافت شد', 'به‌روزرسانی سیستم موجود است']);
}, 1000);
} else {
setNotifications([]);
}
}, [isLoggedIn]);
return ( <div> <h1>داشبورد</h1>
{isLoggedIn ? ( <div> <p>خوش آمدید!</p> <Notifications messages={notifications} /> </div>
) : ( <p>لطفاً وارد شوید تا محتوا را مشاهده کنید.</p>
)}
<button onClick={() => setIsLoggedIn(prev => !prev)}>
{isLoggedIn ? 'خروج' : 'ورود'} </button> </div>
);
}
export default Dashboard;در این مثال پیشرفته، کامپوننت Dashboard رندر شرطی را در یک سناریوی واقعی نشان می‌دهد. هنگام ورود کاربر، Notifications نمایش داده می‌شود و useEffect برای بارگذاری غیرهمزمان اعلان‌ها استفاده می‌شود. هنگام خروج، لیست اعلان‌ها پاک می‌شود تا از رندر غیرضروری جلوگیری شود.
این الگو، جریان داده‌های واضح و مدیریت استیت مؤثر را نشان می‌دهد. ترکیب ternary و logical short-circuiting باعث ایجاد کدی خوانا و قابل نگهداری می‌شود و برای نمایش محتوای مبتنی بر دسترسی، اعلان‌ها و داشبوردهای دینامیک مناسب است.
بهترین شیوه‌ها شامل استفاده از کامپوننت‌های کوچک و قابل استفاده مجدد، مدیریت استیت به‌صورت محلی یا با Context/Redux و استفاده صحیح از ternary و logical operators است. از if مستقیم در JSX یا تغییر مستقیم state پرهیز کنید.
اشتباهات رایج شامل جریان داده اشتباه، رندر غیرضروری و مدیریت نادرست داده غیرهمزمان هستند. برای بهینه‌سازی عملکرد می‌توان از React.memo، useMemo و useCallback استفاده کرد. امنیت شامل اعتبارسنجی داده‌های ورودی و مدیریت مناسب خطاهاست.
📊 جدول مرجع
| ری‌اکت (React) Element/Concept | Description | Usage Example |
|---|---|---|
| Ternary Operator | انتخاب کامپوننت بر اساس شرط | {isLoggedIn ? <UserGreeting /> : <GuestGreeting />} |
| Logical AND (&&) | نمایش کامپوننت فقط اگر شرط true باشد | {messages.length && <Notifications messages={messages} />} |
| useState | مدیریت استیت محلی | const [isLoggedIn, setIsLoggedIn] = useState(false) |
| useEffect | مدیریت side-effects بر اساس تغییر state | useEffect(() => { fetchData(); }, [isLoggedIn]) |
| props | ارسال داده به کامپوننت فرزند | <Notifications messages={notifications} /> |
| React.memo | جلوگیری از re-render غیرضروری | export default React.memo(Notifications); |
رندر شرطی در ری‌اکت ابزاری حیاتی برای ایجاد رابط‌های کاربری داینامیک و پاسخگو است. توسعه‌دهندگان باید نحوه استفاده صحیح از ternary و logical operators، مدیریت استیت و بهینه‌سازی عملکرد را یاد بگیرند. این تکنیک به‌طور مستقیم با lifecycle و جریان داده‌ها مرتبط است.
برای ادامه، توصیه می‌شود Context API یا Redux، memoization و lazy-loading را تمرین کنید. پروژه‌هایی مانند سیستم ورود، داشبورد و مرکز اعلان‌ها فرصت مناسبی برای پیاده‌سازی عملی فراهم می‌کنند. منابع رسمی ری‌اکت و پروژه‌های عملی بهترین راه برای تقویت دانش هستند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود