Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon كيف تدعم React 19 العناصر المخصصة بشكل مختلف عن الإصدارات السابقة


كيف تدعم React 19 العناصر المخصصة بشكل مختلف عن الإصدارات السابقة


يقدم React 19 تحسينات كبيرة لدعم العناصر المخصصة مقارنة بالإصدارات السابقة ، مع التركيز بشكل أساسي على كيفية إدارة الدعائم أثناء التقديم. فيما يلي الاختلافات الرئيسية:

معالجة الدعامة المحسنة

1. الفصل بين السمات والخصائص: في React 19 ، يتم تعيين الدعائم التي تتوافق مع الخصائص على مثيل العنصر المخصص كخصائص أثناء تقديم جانب العميل. إذا كان الدعامة نوعًا بدائيًا (مثل "السلسلة" أو "الرقم" أو "صحيح") ، فسيتم تقديمه كسمة. يتم استبعاد الأنواع غير المحددة (مثل "الكائن" أو "الرمز" أو "الوظيفة") من التقديم. يسمح هذا النهج بتفاعل أكثر سهولة مع عناصر مخصصة ، ويتوافق مع كيفية تصميمها عادة لتعمل [3] [4].

2. تحسينات عرض من جانب الخادم (SSR): خلال SSR ، ينطبق نفس المنطق: يتم تقديم الدعائم البدائية كسمات ، بينما يتم حذف الأنواع غير المحددة. هذا يضمن أن الإخراج الذي تم تقديمه للخادم يتسق مع ما يتوقعه العميل ، مما يقلل من عدم التطابق المحتملة أثناء الترطيب [4] [5].

3. سجلات العناصر المخصصة في SCOPED: REACT 19 يدعم سجلات العناصر المخصصة التي تم تحديدها ، مما يسمح للمطورين بإدارة العناصر المخصصة بشكل أكثر فعالية في البنى الدقيقة. تساعد هذه الميزة في منع تعارض الإصدار عندما تعتمد تطبيقات متعددة على إصدارات مختلفة من نفس العنصر المخصص ، وتعزيز النموذجية والتوافق [2].

4. محسّن مقاييس الأداء: حقق React 19 درجة 100 ٪ على العناصر المخصصة في كل مكان ، وهو تحسن كبير على الإصدارات السابقة. يشير هذا إلى أداء أفضل وتوافق مع مكونات الويب ، معالجة الانتقادات السابقة فيما يتعلق بمعالجة React للعناصر المخصصة [5].

هذه التحسينات في React 19 لا تبسيط دمج العناصر المخصصة في تطبيقات React فحسب ، بل تعمل أيضًا على تحسين الأداء الكلي وتجربة المطور ، مما يسهل العمل مع مكونات الويب في سياق React.

الاستشهادات:
[1] https://github.com/facebook/react/issues/11347
[2] https://github.com/facebook/react/issues/28938
[3] https://www.angularminds.com/blog/react-19-beta-features
[4] https://react.dev/blog/2024/04/25/react-19
[5]
[6] https://www.bacancytechnology.com/blog/whats-new-
[7] https://eluminoustechnologies.com/blog/rect-19/
[8]