توقف عن تمرير البيانات (Prop Drilling) لنوافذ React المنبثقة (استخدم react-call)
BBetter Stack
컴퓨터/소프트웨어AI/미래기술
Transcript
00:00:00حصلت React للتو على أداة جديدة مثيرة للاهتمام تغير تماماً طريقة تفكيرنا في
00:00:05عرض عناصر واجهة المستخدم التفاعلية مثل النوافذ المنبثقة، أو مربعات الحوار، أو صناديق التأكيد.
00:00:11تسمى React Call.
00:00:13إذا سبق لك بناء معالج نماذج معقد متعدد الخطوات، أو نافذة تأكيد، أو أداة
00:00:18اختيار عناصر في React، فأنت تعلم بالفعل أن إدارة حالات الفتح، وتمرير دوال الاستدعاء عند النجاح، و
00:00:24التعامل مع الوعود (promises) يمكن أن يحول كودك إلى فوضى عارمة.
00:00:28لكن React Call مصممة لحل هذه المشكلة.
00:00:31لذا في فيديو اليوم، سنلقي نظرة على React Call، ونرى كيف تعمل، وننظر
00:00:36في بعض أمثلة الكود.
00:00:37سيكون الأمر ممتعاً جداً، لذا دعونا نغوص فيه.
00:00:44إذن ما هي React Call بالضبط؟
00:00:47حسناً، هي أداة صغيرة وخفيفة تسمح لك باستدعاء مكونات React كدوال
00:00:52غير متزامنة (asynchronous).
00:00:53فكر في واجهة برمجة تطبيقات المتصفح الأصلية window.confirm.
00:00:57عندما تستدعيها، يتوقف الكود الخاص بك حرفياً، وينتظر قيام المستخدم بالنقر على “موافق” أو “إلغاء”، و
00:01:03يعيد قيمة منطقية (Boolean) مباشرة في سياق الكود.
00:01:06إنها تحافظ على منطق عملك محلياً بالكامل للمستدعي.
00:01:09وتجلب React Call نفس نموذج التفكير البديهي هذا مباشرة إلى عالم React الحديث.
00:01:16بدلاً من إنشاء متغير حالة منفصل مثل isModalOpen، وتمرير خصائص مثل onClose أو
00:01:22onSubmit، وإعداد مزودات سياق معقدة أو بوابات (portals)، يمكنك ببساطة انتظار
00:01:29استجابة المكون.
00:01:30تحت الغطاء، تقوم الأداة بتجريد إدارة الوعود، وتعالج أنواع الطلبات والاستجابات
00:01:36بشكل افتراضي، وتدعم بالكامل الاستبدال السريع للوحدات (HMR)، ليبقى سير عمل التطوير الخاص بك
00:01:41سريعاً.
00:01:42وهي تقدم ثلاثة مفاهيم: الجذر والمكدس (Root and Stack)، وUpsert، وتدفق الطفرة (Mutation Flow).
00:01:48أول مفهوم رئيسي هو الجذر والمكدس.
00:01:50مع React Call، المكون القابل للاستدعاء الذي تنشئه ليس مجرد دالة.
00:01:54إنه يعمل فعلياً كنقطة تثبيت خاصة به في شجرة تطبيقك.
00:01:58أنت تضع المكون كـ “وسم جذر” (root tag) في أي مكان مرئي، مثل ملف التطبيق الرئيسي أو
00:02:03ملف التنسيق (layout)، ويظل هناك كمستمع.
00:02:06عندما تقوم بتشغيل استدعاءات متعددة، تديرها React Call باستخدام مكدس داخلي، وتتعامل
00:02:11مع عرض كل حالة نشطة تلقائياً.
00:02:14كما أنها تتعامل مع رسوم الخروج المتحركة عند الإغلاق وتبقي الحالات معزولة حتى
00:02:20لا تتعارض مع بعضها البعض.
00:02:22التالي هو Upsert، وهو منقذ حقيقي لأنماط واجهة المستخدم الفردية (singleton UI patterns).
00:02:27عادةً، إذا قمت باستدعاء مكون عدة مرات، فإنه يدفع حالة جديدة إلى المكدس.
00:02:33ولكن ماذا لو كنت تبني إشعاراً عالمياً، أو تراكباً للتحميل، أو مؤشر تقدم
00:02:39حيث لا تريد سوى وجود حالة واحدة فقط على الشاشة في كل مرة؟
00:02:45حسناً، بدلاً من تنفيذ “call”، يمكنك تنفيذ “upsert”.
00:02:48وإذا كانت الحالة نشطة بالفعل، فإنها تقوم بتحديث المكون الحالي بسلاسة ببياناتك الجديدة
00:02:52أثناء التنفيذ، بدلاً من إنتاج نسخة مكررة.
00:02:56وأخيراً، لدينا تدفق الطفرة (Mutation Flow).
00:02:58تتضمن هذه المكتبة خطافاً (hook) مدمجاً يسمى useMutationFlow مصمماً خصيصاً لربط واجهة المستخدم القابلة
00:03:04للاستدعاء مباشرة بالإجراءات غير المتزامنة.
00:03:06إذا كان لديك نافذة تأكيد تطلق طلب واجهة برمجة تطبيقات خلفي ثقيل عند الإرسال، فإن الخطاف
00:03:12يدير الحالة المعلقة لك بشكل افتراضي.
00:03:15إنه يضمن بقاء النافذة مفتوحة وعرض مؤشر تحميل بينما تعمل الدالة غير المتزامنة و
00:03:21ينهي الاستدعاء رسمياً فقط بمجرد حل الوعد بنجاح.
00:03:25إنه يربط حالة واجهة المستخدم وطفرات البيانات الخاصة بك بشكل جميل.
00:03:29دعونا الآن نلقي نظرة على بعض الأمثلة العملية على موقعهم، لأنني أعتقد أنها
00:03:34مشروحة ذاتياً بشكل كبير.
00:03:36وأعتقد أنها تظهر أيضاً مدى قلة الكود الذي تحتاج فعلياً لكتابته للبدء.
00:03:41على سبيل المثال، في مربع حوار التأكيد، نحتاج فقط إلى إنشاء عنصر قابل للاستدعاء هنا.
00:03:48ثم نغلف مكوننا كمكون عالي الترتيب (HOC) باستخدام هذا الخطاف create callable.
00:03:54وبعد ذلك يمكننا تمرير دوال الاستدعاء لأزرارنا عند النقر.
00:04:01وهذا كل ما نحتاجه للكائن القابل للاستدعاء.
00:04:04وفي الجذر، نحتاج فقط إلى استيراد المكون نفسه.
00:04:08وبالنسبة لزر الحذف، بما أن مكون التأكيد مغلف بدالة create callable
00:04:14عالية الترتيب، يمكننا ببساطة استدعاؤه بشكل غير متزامن في دالة handle click هذه.
00:04:21لذا الأمر أنيق جداً ومرتب، ولا يوجد الكثير من الكود التمهيدي (boilerplate).
00:04:26ولا تحتاج لاستخدام أي مزودات سياق أو متغيرات حالة أو Redux أو Zustand.
00:04:31وإذا كنت ترغب في التعمق أكثر في عدد حالات الاستخدام الموجودة، يمكنك التحقق من قسم
00:04:36الأمثلة، حيث يقدم كل مثال مقتطف كود.
00:04:40بعض هذه الأمثلة معقد للغاية، مثل الأمثلة التي تتعامل مع إجراءات غير متزامنة
00:04:46تعمل في الخلفية.
00:04:49لذا يمكنك التحقق من كل هذه الأمثلة الرائعة.
00:04:52أعتقد أنها رائعة جداً وخفيفة الوزن.
00:04:55أحسنت صنعاً.
00:04:56هذا كل ما في الأمر يا رفاق.
00:04:57هذه هي React Call باختصار.
00:04:59حسناً، يمكنك بالتأكيد برمجة غلاف وعود مخصص أو نافذة منبثقة بسيطة بنفسك.
00:05:06لكنني أعتقد أن هذه المكتبة تتعامل مع جميع الحالات الحافة الصعبة بشكل جميل، مثل التعامل مع
00:05:11حالات متعددة نشطة في مكدس، أو تحديث العناصر الفردية عبر upsert، ومزامنة حالات واجهة المستخدم مع طفرات
00:05:17الخلفية الثقيلة.
00:05:18لذا أعتقد أنها أداة خفيفة الوزن رائعة للاحتفاظ بها في مجموعة أدوات الواجهة الأمامية الخاصة بك من أجل هندسة
00:05:24React أكثر نظافة وقابلية للقراءة.
00:05:26ما رأيك في React Call؟
00:05:28هل يعجبك هذا النمط؟
00:05:29هل ستستخدمه في مشاريعك؟
00:05:31أخبرنا في قسم التعليقات أدناه.
00:05:33ويا رفاق، إذا أحببتم هذه الأنواع من التحليلات التقنية، يرجى إخباري عن طريق الضغط
00:05:37على زر الإعجاب أسفل الفيديو.
00:05:39ولا تنسوا أيضاً الاشتراك في قناتنا.
00:05:42كان معكم أندرس من BetterStack، وسأراكم في الفيديوهات القادمة.
00:05:58إلى اللقاء
Community Posts
No posts yet. Be the first to write about this video!
Write about this video