الفرق بين ReactDOM.render() و ReactDOM.createRoot()

الكود الأول يستخدم ReactDOM.render() لربط مكون React مع عنصر HTML في صفحة الويب، وهو الأسلوب الأكثر استخداماً في إنشاء تطبيقات React.

أما الكود الثاني فيستخدم ReactDOM.createRoot() لإنشاء نوع جديد من الجذر Root المستخدم في React، ويتم تمرير عنصر HTML كمعامل لـ createRoot()، ومن ثم يستخدم render() لربط مكون React مع العنصر HTML.

الفرق الرئيسي بين الكودين هو أن ReactDOM.createRoot() تتطلب الإصدار 18.0.0 من React أو أعلى، وهو تغيير رئيسي في الطريقة التي يعمل بها React ويتعامل مع جذر التطبيق.

ويستخدم createRoot() لتحسين أداء التطبيقات الكبيرة والمعقدة.

في حين يعد ReactDOM.render() أكثر استخدامًا حتى الآن، ويعتبر الأسلوب القياسي لربط مكونات React بعناصر HTML.

الفروق بين react 17 و react 18

تم إصدار React 18 في نهاية عام 2021، ولذلك فإن الفروقات بين React 17 و React 18 غالباً ما تكون تغييرات صغيرة للغاية.

من بين التغييرات الرئيسية التي تمت إجراؤها في React 18:

• تحسينات في أداء التطبيقات التي تستخدم الـ Suspense API والـ server components.
• إمكانية إلغاء تأجيل إنشاء الـ server components بمعنى عدم الانتظار لحين تحميل كل البيانات للصفحة وإظهارها مباشرة.
• تحسينات في عملية الإعادة التصيير Re-rendering.
• تحسينات في إدارة الذاكرة والأداء العام.

ومن بين التغييرات الأخرى المهمة في React 18:

• دعم أفضل للتطبيقات الكبيرة والمعقدة.
• إمكانية التحكم بسلاسة في الـ rendering schedule.
• تحسينات في مجال التوثيق والتعليمات البرمجية.

ويتطلب تحديث التطبيقات من React 17 إلى React 18 تعديلات طفيفة في الشفرة المصدرية. 

كيف يتم الإنتقال من react 17 إلى react 18

توجد عدة خطوات يجب اتباعها لترقية تطبيق React من الإصدار 17 إلى الإصدار 18، وهي كالتالي:

• تحديث مكتبات React و React-DOM إلى الإصدار 18 باستخدام أمر npm أو yarn.
• تحديث جميع المكونات التي تحوي استخدامًا لـ lifecycle methods مع العلم بأن الـ lifecycle methods تم إزالتها في React 18.
• استبدال الـ findDOMNode() بطرق أخرى للوصول إلى عناصر DOM.
• التحديث إلى الـ new JSX Transform وذلك بتحديث ملفات الـ Babel Configuration.

• في React 17، يجب استخدام الدالة ReactDOM.render() لتجميع مكون React إلى DOM. ولكن في React 18 يجب استخدام دالة ReactDOM.createRoot() لإنشاء جذر React واستخدام دالة render() عليه.

وتستخدم ReactDOM.createRoot() بدلاً من ReactDOM.render() لتحسين أداء التطبيق كما أوضحت من قبل.

فيما يلي مثال على كيفية استخدام ReactDOM.createRoot() بدلاً من ReactDOM.render():

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

function App() {
  return <h1>مرحباً بالعالم!</h1>;
}

root.render(<App />);

يتم استخدام دالة ReactDOM.createRoot() لإنشاء جذر React، ومن ثم تمرير مكون React إليه باستخدام دالة render().

• لتحقق من عدم وجود مشاكل مع التغييرات الجديدة في React 18 باستخدام مكتبات الاختبارات (Testing Libraries) المختلفة المتوفرة.

الفرق بين الأكواد هو أن الأولى تستخدم ReactDOM.render() لتقديم عنصر واحد في نهاية المطاف إلى عنصر HTML موجود في الصفحة.

بينما الثانية تستخدم ReactDOM.createRoot() لإنشاء جذر جديد لتطبيق React وتقديم عناصر متعددة داخله.

يعتبر استخدام ReactDOM.createRoot() أكثر كفاءة في بعض الحالات حيث يسمح بإعادة التقديم التلقائي (automatic re-rendering) والتحسينات الأخرى في React 18.

والدالة ReactDOM.render() غير مدعومة في React 18.

تصفح هذا النقاش.

 إذا قمت بالترقية إلى الإصدار 18 وما زلت تستخدم ReactDOM.render لإنشاء تطبيق ، فستتلقى تنبيه يخبرك بأن ال ReactDOM.render لم تعد مدعومه

وبإختصار  فإن التمييز الأساسي بين createRoot و ReactDOM.render هو أن createRoot يولد حاوية جذر جديدة لتصيير المكونات ، بينما يعرض ReactDOM.render المكونات مباشرة إلى عنصر DOM محدد وهذا هو الفرق بينهما 

ولكن هناك بعد التحفظات عند استخدام ال createRoot

• إذا كان تطبيقك server-rendered ، فإن استخدام createRoot () غير مدعوم. استخدم hydrateRoot () بدلاً من ذلك.
• عندما تريد عرض جزء من JSX في جزء مختلف من شجرة DOM ليس تابعًا لمكونك (على سبيل المثال ،   modal أو  tooltip) ، استخدم createPortal بدلاً من createRoot

يمكنك الإطلاع على المزيد من المعلومات من خلال التوثيق الرسمي ل react من هذا الرابط