در حال بارگذاری...

Fragments و Portals

در ری‌اکت (React)، Fragments و Portals دو مفهوم پیشرفته و حیاتی برای مدیریت ساختار کامپوننت‌ها و بهینه‌سازی عملکرد برنامه‌های وب مدرن هستند. Fragments به توسعه‌دهندگان امکان می‌دهد چندین المان را بدون ایجاد نودهای اضافی در DOM بازگردانند، که باعث کاهش re-render های غیرضروری و حفظ ساختار تمیز DOM می‌شود. این امر به ویژه زمانی اهمیت دارد که بخواهیم از یک کامپوننت چندین المان را return کنیم بدون اینکه wrapper اضافی اضافه کنیم.
Portals امکان render کردن children یک کامپوننت را خارج از سلسله‌مراتب والد فراهم می‌کند. این تکنیک برای ایجاد modalها، tooltipها و notificationها ضروری است، زیرا این المان‌ها نیاز دارند که روی لایه‌های UI دیگر نمایش داده شوند بدون اینکه ساختار parent را مختل کنند.
مفاهیم اصلی ری‌اکت مانند components، مدیریت state، جریان داده (data flow) و lifecycleها برای استفاده صحیح از Fragments و Portals بسیار مهم هستند. با درک این مفاهیم، توسعه‌دهندگان می‌توانند کامپوننت‌های reusable، maintainable و عملکرد بالا بسازند.
در این آموزش، شما یاد خواهید گرفت که چگونه Fragments و Portals را در سناریوهای واقعی پیاده‌سازی کنید، از best practices استفاده کنید و از اشتباهات رایجی مانند prop drilling و re-render های غیرضروری جلوگیری نمایید.

مثال پایه

jsx
JSX Code 
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
if (!isOpen) return null;
return ReactDOM.createPortal(
<div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div style={{ backgroundColor: 'white', margin: '20% auto', padding: '20px', width: '300px', borderRadius: '8px' }}>
{children} <button onClick={onClose}>بستن</button> </div> </div>,
document.getElementById('modal-root')
);
}

function App() {
const [isModalOpen, setIsModalOpen] = useState(false);

return (
<> <h1>Fragments و Portals در ری‌اکت</h1>
<button onClick={() => setIsModalOpen(true)}>باز کردن مودال</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}> <h2>محتوای مودال</h2> <p>این محتوا با استفاده از Portal رندر شده است.</p> </Modal>
</>
);
}

export default App;

در این مثال، App component از Fragment (<>) برای wrap کردن چندین المان استفاده می‌کند، بدون اینکه نود اضافی در DOM ایجاد شود. hook useState وضعیت باز بودن modal را مدیریت می‌کند و جریان داده یک‌طرفه (unidirectional data flow) و مدیریت state را نشان می‌دهد.
Modal component از ReactDOM.createPortal استفاده می‌کند تا محتوای modal خارج از سلسله‌مراتب والد و در 'modal-root' رندر شود. شرطی کردن render با if (!isOpen) return null باعث بهینه‌سازی DOM و جلوگیری از re-render غیرضروری می‌شود.
این الگو طراحی کامپوننت reusable، مدیریت state encapsulated و UI logic تمیز را نشان می‌دهد. استفاده از Portals برای modalها و notificationها ضروری است، زیرا بدون مختل کردن parent DOM، overlayهای UI را امکان‌پذیر می‌سازد.

مثال کاربردی

jsx
JSX Code 
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function Notification({ message, onClose }) {
useEffect(() => {
const timer = setTimeout(onClose, 3000);
return () => clearTimeout(timer);
}, [onClose]);

return ReactDOM.createPortal(
<div style={{ position: 'fixed', bottom: '20px', right: '20px', backgroundColor: '#444', color: '#fff', padding: '10px 20px', borderRadius: '5px' }}>
{message} </div>,
document.getElementById('notification-root')
);
}

function App() {
const [notifications, setNotifications] = useState([]);

const addNotification = () => {
setNotifications(prev => [...prev, `Notification ${prev.length + 1}`]);
};

const removeNotification = index => {
setNotifications(prev => prev.filter((_, i) => i !== index));
};

return (
<> <h1>مثال پیشرفته با Fragments و Portals</h1> <button onClick={addNotification}>افزودن Notification</button>
{notifications.map((msg, idx) => (
<Notification key={idx} message={msg} onClose={() => removeNotification(idx)} />
))}
</>
);
}

export default App;

این مثال پیشرفته، استفاده از Portals و مدیریت state را نشان می‌دهد. هر Notification خارج از parent DOM hierarchy رندر می‌شود و به شکل overlay نمایش داده می‌شود. hook useEffect، lifecycle و cleanup مناسب را برای بستن خودکار notification مدیریت می‌کند.
App component، آرایه‌ای از notifications را به صورت immutable مدیریت می‌کند و از re-render غیرضروری جلوگیری می‌کند. این الگو، طراحی کامپوننت‌های reusable، maintainable و عملکرد بالا را نشان می‌دهد. Fragments و Portals تعداد نودهای DOM را کاهش می‌دهند و اشکال‌زدایی و نگهداری SPA را آسان‌تر می‌کنند.

در best practices ری‌اکت، استفاده از Fragments برای جلوگیری از ایجاد wrapper اضافی و Portals برای رندر کردن overlayها خارج از سلسله‌مراتب والد توصیه می‌شود. state باید immutable مدیریت شود تا side effectها و re-renderهای غیرضروری کاهش یابند. از prop drilling جلوگیری کنید و از callbacks و state encapsulated استفاده نمایید.
اشتباهات رایج شامل استفاده غیرضروری از wrapper، رندر کردن Portals بدون شرط و mutation مستقیم state است. برای بهینه‌سازی عملکرد، از memoization، key مناسب و minimal state updates استفاده کنید. امنیت Portals با sanitize کردن محتوا تضمین می‌شود و useEffect cleanup از memory leak جلوگیری می‌کند.

📊 جدول مرجع

ری‌اکت (React) Element/Concept Description Usage Example
Fragment چندین المان را بدون ایجاد نود اضافی wrap می‌کند <> <div/> <span/> </>
Portal اجازه render کردن children خارج از سلسله‌مراتب والد ReactDOM.createPortal(<Modal/>, document.getElementById('modal-root'))
useState مدیریت state محلی const [open, setOpen] = useState(false)
useEffect مدیریت side effect و lifecycle useEffect(() => { console.log('mounted'); return cleanup; }, [])
Conditional Rendering رندر کردن component بر اساس state isOpen ? <Modal/> : null

Fragments و Portals ابزارهای حیاتی برای برنامه‌های مدرن ری‌اکت هستند. Fragments DOM را تمیز نگه می‌دارند و Portals flexibility برای overlayها و UI modals فراهم می‌کنند. ترکیب این‌ها با مدیریت state، lifecycle و بهینه‌سازی عملکرد، منجر به کامپوننت‌های reusable و maintainable می‌شود.
مرحله بعدی شامل یادگیری Context API، hooks پیشرفته مانند useReducer و useMemo و patterns ترکیب کامپوننت است. استفاده در پروژه‌های عملی مانند dashboards و notification systems دانش شما را تثبیت می‌کند. منابع آموزشی مانند documentation ری‌اکت و tutorials جامعه برای یادگیری ادامه‌دار توصیه می‌شوند.

کلیدواژه‌های مرتبط

کاربران همچنین با این عبارات این محتوا را جستجو می‌کنند:

React Fragments آموزش فارسی React Portals راهنما فارسی کامپوننت پیشرفته ری‌اکت مودال با Portals ری‌اکت Fragments vs div ری‌اکت مدیریت state با Portals ری‌اکت patterns UI SPA ری‌اکت کامپوننت‌های reusable ری‌اکت بهینه‌سازی عملکرد Fragments و Portals ری‌اکت notification با Portals ری‌اکت پیاده‌سازی modal ری‌اکت lifecycle کامپوننت با Portals ری‌اکت best practices Fragments ری‌اکت overlay UI با Portals ری‌اکت جلوگیری از re-render غیرضروری ری‌اکت

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
4
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
React آموزش