Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon كيف تعمل المرجع الجديد كميزة الدعامة على تحسين كفاءة التطوير


كيف تعمل المرجع الجديد كميزة الدعامة على تحسين كفاءة التطوير


الميزة الجديدة في React 19 والتي تسمح بتمرير المرجع كدعائم بدلاً من استخدام "ForwardRef" يمكن أن تحسن كفاءة التطوير بعدة طرق رئيسية:

أبسط وأكثر سهولة في واجهة برمجة التطبيقات

يعد تمرير REFs كدعائم منتظمة واجهة برمجة تطبيقات أكثر طبيعية وبديهية مقارنة باستخدام "forwardref". يتوافق بشكل أفضل مع مبدأ رد الفعل الأساسي المتمثل في تمرير البيانات أسفل شجرة المكون عبر الدعائم. هذا يجعل الكود أسهل في الفهم والعقل ، وخاصة للمبتدئين.

انخفاض الغلاية

يتطلب استخدام "forwardref" لف مكون الطفل في مكالمة "ForwardEf" وتمرير "المرجع" كوسيطة ثانية لمكون الوظيفة. هذا يضيف بعض رمز الغلاية. تمرير المرجع مباشرة كدعم يلغي هذا الرمز الإضافي.

تغليف أفضل

عند استخدام `forwardref` ، يجب أن يكون مكون الطفل على دراية بأنه يتلقى مرجعًا ويحتاج إلى إرفاقه بعنصر DOM المناسب. يتيح تمرير المرجع كدعم للمكون الطفل أن يظل غير مدرك للمرجع ، وتحسين التغليف.

أسهل إعادة إنشاء

إذا كنت بحاجة إلى إعادة تشكيل شجرة مكون وتغيير نقطة مرفق المرجع ، فمن السهل تحديث اسم الدعامة بدلاً من الاضطرار إلى تحديث مكالمة `forwardref` في أماكن متعددة. هذا يجعل قاعدة الكود أكثر قابلية للصيانة.

بما يتوافق مع مكونات الفصل

في مكونات الفصل ، يتم إرفاق المراجع باستخدام "المرجع" ، وليس من خلال آلية "forwardref" الخاصة. يوفر السماح لـ Refs as Props في مكونات الوظائف واجهة برمجة تطبيقات أكثر اتساقًا عبر مكونات الفصل والوظيفة.

فحص نوع أسهل

عند استخدام TypeScript ، من السهل كتابة التحقق من المرجع الذي تم تمريره كدعم مقارنة باستخدام أنواع `forwardref` و` refattributes `. يمكن استنتاج نوع الدعامة مباشرة من كائن "المرجع.

باختصار ، فإن ميزة Refs As Props الجديدة تجعل API React أكثر بديهية ، ويقلل من الغلاية ، ويحسن التغليف ، ويجعل قاعدة الكود أكثر قابلية للصيانة - وكلها تعمل على تحسين كفاءة المطور عند العمل مع Refs في React 19 وما بعده [1] [3] [4].

الاستشهادات:
[1] https://www.copycat.dev/blog/react-forwardref/
[2] https://stackoverflow.com/questions/58578570/value-of-us-react-forwardref-vs-custom-ref-prop
[3] https://legacy.reactjs.org/docs/forwarding-refs.html
[4]
[5] https://blog.logrobent.com/why-you-hould-use-refs-sparivers
[6] https://react.dev/blog/2024/04/25/react-19pradge-guide
[7 "
[8]