جاري التحميل...

Fragments و Portals

تعد Fragments و Portals من الأدوات المتقدمة في ريآكت (React) التي تتيح للمطورين إدارة بنية واجهة المستخدم (UI) بكفاءة أكبر دون التسبب في إنشاء عناصر DOM إضافية غير ضرورية أو عند الحاجة لإخراج مكونات خارج شجرة DOM الرئيسية. Fragments تسمح بتجميع عناصر متعددة داخل مكون واحد دون إضافة عناصر إضافية في DOM، مما يحسن الأداء ويجعل الشفرة أنظف. أما Portals فتسمح بعرض محتوى المكون في مكان مختلف في DOM بعيدًا عن الهيكل الأب المباشر، وهو مفيد لإنشاء نوافذ حوارية (Modals)، تنبيهات، أو أي محتوى عائم يتطلب تجاوز حدود الحاويات الأصلية.
يتم استخدام Fragments غالبًا عند الحاجة لتجميع عناصر متعددة لإرجاعها من المكون دون إضافة عناصر DOM إضافية غير ضرورية، بينما تُستخدم Portals في الحالات التي يحتاج فيها المكون إلى التفاعل مع DOM خارجي أو عناصر UI تتجاوز حدود المكون الأب. هذه المفاهيم مرتبطة بشكل وثيق بمفاهيم ريآكت الأساسية مثل المكونات، إدارة الحالة (State)، تدفق البيانات (Data Flow)، ودورة حياة المكونات (Lifecycle).
من خلال تعلم Fragments و Portals، سيتعرف المطورون على طرق تحسين أداء تطبيقات SPA الحديثة، وإعادة استخدام المكونات بكفاءة، وتقليل prop drilling، وتحسين تجربة المستخدم. في هذا الدرس، سنغطي تطبيقات عملية لكيفية استخدام Fragments و Portals، ونوضح كيفية دمجها في مكونات ريآكت الحديثة مع الحفاظ على الأداء والأفضلية البرمجية.

مثال أساسي

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

// مثال استخدام Fragment
function FragmentExample() {
return (
<React.Fragment> <h2>عنوان رئيسي</h2> <p>هذا نص داخل Fragment لتجنب إنشاء div إضافي.</p>
</React.Fragment>
);
}

// مثال استخدام Portal
function PortalExample() {
return ReactDOM.createPortal(
<div style={{ background: 'lightblue', padding: '20px', borderRadius: '8px' }}> <h3>نافذة حوارية باستخدام Portal</h3> <p>هذا المكون يظهر خارج DOM الرئيسي للمكون الأب.</p> </div>,
document.getElementById('portal-root')
);
}

function App() {
const [showPortal, setShowPortal] = useState(false);

return ( <div> <FragmentExample />
<button onClick={() => setShowPortal(!showPortal)}>إظهار Portal</button>
{showPortal && <PortalExample />} </div>
);
}

export default App;

يوضح الكود أعلاه كيفية استخدام Fragments و Portals في ريآكت (React) بطريقة عملية وأنيقة. في المثال الأول، FragmentExample يستخدم React.Fragment لتجميع عنصرين (h2 و p) دون إضافة عنصر div إضافي في DOM، مما يقلل من التعقيد ويحسن الأداء. هذا مهم خاصة عند إنشاء مكونات معقدة أو عند الحاجة لإرجاع عدة عناصر من المكون الواحد.
في المثال الثاني، PortalExample يستخدم ReactDOM.createPortal لعرض محتوى خارج شجرة DOM الأصلية. هذا يسمح للمطورين بإنشاء نوافذ حوارية أو تنبيهات عائمة دون أن تؤثر على تصميم DOM الأب، مما يسهل التحكم في الطبقات (z-index) والتصميم العام.
في App، نرى كيفية إدارة الحالة (State) باستخدام useState للتحكم في ظهور Portal بشكل ديناميكي، مع الحفاظ على بنية مكونات واضحة وقابلة لإعادة الاستخدام. هذا يوضح كيفية دمج تدفق البيانات وإدارة الحالة مع Fragments و Portals بطريقة عملية. بتطبيق هذه المفاهيم، يمكن للمطورين تحسين الأداء، تجنب prop drilling غير الضروري، والحد من إعادة التصيير (Re-renders) غير المطلوبة.

مثال عملي

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

function Notification({ message, duration }) {
useEffect(() => {
const timer = setTimeout(() => {
console.log('Notification closed');
}, duration);
return () => clearTimeout(timer);
}, [duration]);

return ReactDOM.createPortal(
<div style={{ position: 'fixed', top: '20px', right: '20px', background: 'orange', padding: '15px', borderRadius: '10px' }}>
{message} </div>,
document.getElementById('portal-root')
);
}

function App() {
const [showNotification, setShowNotification] = useState(false);

return ( <div> <h1>مثال عملي على Portal</h1>
<button onClick={() => setShowNotification(true)}>إظهار الإشعار</button>
{showNotification && <Notification message="تمت العملية بنجاح!" duration={3000} />} </div>
);
}

export default App;

يعرض المثال العملي أعلاه تطبيقًا واقعيًا لـ Portals في ريآكت (React). مكون Notification يستخدم useEffect لإغلاق الإشعار تلقائيًا بعد مدة محددة، مما يوضح دمج دورة حياة المكونات (Lifecycle) وإدارة الحالة. ReactDOM.createPortal يضمن أن نافذة الإشعار تظهر خارج DOM الأب مباشرة، مما يسهل التحكم في الطبقات والتصميم، ويحسن تجربة المستخدم.
هذا المثال يوضح أفضل الممارسات في ريآكت مثل:

  • إدارة الحالة بفعالية باستخدام useState.
  • استخدام useEffect لتنظيف الموارد (clean-up) ومنع تسريبات الذاكرة.
  • استخدام Portals لعرض عناصر UI عائمة دون التأثير على DOM الأب.
  • تحسين الأداء وتجنب إعادة التصيير غير الضرورية.
    من خلال هذا المثال، يمكن للمطورين تعلم كيفية بناء مكونات قابلة لإعادة الاستخدام، وإدارة البيانات والدورة الحياتية للمكونات مع الحفاظ على هيكل DOM نظيف ومنظم. كما يوضح كيفية التعامل مع الأحداث والمكونات الديناميكية بطريقة آمنة وفعالة.

أفضل ممارسات ريآكت و الأخطاء الشائعة عند استخدام Fragments و Portals:

  1. التأكد من استخدام Fragments لتجميع العناصر دون إنشاء عناصر DOM غير ضرورية، مما يحسن الأداء ويجعل الشيفرة أنظف.
  2. عند استخدام Portals، تحقق دائمًا من وجود عنصر الهدف في DOM لتجنب أخطاء Runtime.
  3. تجنب prop drilling غير الضروري من خلال استخدام Context API إذا كان هناك بيانات مشتركة بين المكونات المتعددة.
  4. قلل من إعادة التصيير غير الضرورية عن طريق تقسيم المكونات واستخدام React.memo عند الحاجة.
  5. حافظ على إدارة دورة حياة المكونات بشكل صحيح، خاصة مع Portals التي قد تحتاج لتنظيف الموارد بعد الإزالة.
  6. تحسين الأداء باستخدام lazy loading و code splitting عند عرض Portals متعددة أو مكونات كبيرة الحجم.
  7. اعتبارات الأمان: تأكد من عدم إدخال محتوى HTML غير موثوق مباشرة داخل Portals لتجنب هجمات XSS.

📊 جدول مرجعي

ريآكت (React) Element/Concept Description Usage Example
Fragment يجمع عناصر متعددة دون إضافة عنصر DOM إضافي <React.Fragment><Child1 /><Child2 /></React.Fragment>
Short Syntax Fragment اختصار لـ React.Fragment بدون كتابة الكلمة الكاملة <><Child1 /><Child2 /></>
Portal يعرض المكون خارج DOM الأب ReactDOM.createPortal(<Modal />, document.getElementById('portal-root'))
useEffect يدير دورة حياة المكونات والتأثيرات الجانبية useEffect(() => { ... }, [])
useState يدير حالة المكونات const [state, setState] = useState(initialValue)

الخلاصة والخطوات التالية في ريآكت (React):
لقد تعلمنا كيفية استخدام Fragments لتجميع عناصر متعددة دون إضافة عناصر DOM إضافية، واستخدام Portals لعرض محتوى المكونات خارج DOM الأب مباشرة. هذه المفاهيم تحسن الأداء، تبسط الهيكل، وتساعد في بناء مكونات مرنة وقابلة لإعادة الاستخدام.
الخطوة التالية هي دمج هذه المفاهيم مع إدارة الحالة المعقدة، Context API، و Hooks المتقدمة مثل useReducer و useCallback لتعزيز الأداء. كما يُنصح باستكشاف تقنيات lazy loading و Suspense عند التعامل مع Portals كبيرة أو مكونات ثقيلة، وممارسة إنشاء Modals، تنبيهات، وقوائم عائمة باستخدام Portals وFragments في تطبيقات SPA الحديثة.
للتعلم المستمر، يمكن الاطلاع على التوثيق الرسمي لريآكت، ومراجعة مشاريع مفتوحة المصدر، وتجربة بناء مكونات UI معقدة تعتمد على Portals وFragments لتعزيز المهارات العملية.

مصطلحات البحث ذات الصلة

يبحث المستخدمون أيضًا عن هذا المحتوى باستخدام هذه المصطلحات:

Fragments في ريآكت Portals في ريآكت استخدام Fragments و Portals React Fragment vs div React Portal tutorial بالعربية كيفية استخدام Portals في React تحسين الأداء باستخدام Fragments إدارة حالة المكونات مع Portals أمثلة Fragments و Portals ممارسات React المتقدمة إنشاء Modals باستخدام Portals تجنب prop drilling مع Fragments الأداء في SPA باستخدام Portals تعليم React للمطورين المتقدمين بناء مكونات قابلة لإعادة الاستخدام مع Fragments

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
4
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
React درس تعليمي