مرحبا يا هبر!
وبفخر واعتزاز مذهلين ، سلمنا
كتابًا جديدًا عن رد الفعل إلى دار الطباعة الليلة.
في هذه المناسبة ، نقدم لك ترجمة مختصرة قليلاً لمقالة كتبها دان أبراموف ، تصف استخدام المعترضات في الإصدار السادس عشر من React. الكتاب ، الذي نتطلع إليه نحن بالفعل ، موصوف في الفصل 5.
في الأسبوع الماضي ، قدمت
أنا وصوفي ألبرت مفهوم "المعترضين" في مؤتمر React Conf ، تبعه
مناقشة تفصيلية
للموضوع من
Ryan Florence .
أوصي بشدة أن تشاهد هذه المحاضرة العامة لتتعرف على مجموعة المشاكل التي نحاول حلها بمساعدة المعترضين. ومع ذلك ، أنا أقدر ساعة من وقتك للغاية ، لذلك قررت أن أوجز باختصار في هذه المقالة الاعتبارات الرئيسية بشأن المعترضات.
ملاحظة: اعتراضات رد الفعل لا تزال تجريبية. لا حاجة للخوض فيها الآن. لاحظ أيضًا أن هذا المنشور يحدد وجهات نظري الشخصية ، والتي قد لا تتوافق مع موقف مطوري React.
لماذا هناك حاجة لاعتراضات؟من المعروف أن تنظيم المكونات وتدفق البيانات النهائية يساعدان في تنظيم واجهات المستخدم الكبيرة في شكل أجزاء صغيرة ومستقلة وقابلة لإعادة الاستخدام.
ومع ذلك ، غالبًا ما يكون من غير الممكن تقسيم المكونات المعقدة إلى ما بعد حد معين ، حيث يحافظ المنطق على الحالة ولا يمكن استخراجه في دالة أو أي مكون آخر . في بعض الأحيان يشكو أولئك الذين يقولون أن رد الفعل فشل في تحقيق "فصل المهام" من هذا.
مثل هذه الحالات شائعة جدًا ، وترتبط ، على سبيل المثال ، بالرسوم المتحركة ومعالجة النماذج والاتصال بمصادر البيانات الخارجية والعديد من العمليات الأخرى التي قد نحتاج إلى إجرائها باستخدام مكوناتنا. في محاولة لحل مثل هذه المشاكل مع المكونات وحدها ، عادة ما نحصل على:
- المكونات العملاقة التي يصعب إعادة اختبارها وإعادة اختبارها.
- ازدواجية المنطق بين المكونات المختلفة وطرق دورة الحياة.
- الأنماط المعقدة ، على وجه الخصوص ، تقديم الدعائم ومكونات النظام الأعلى.
نعتقد أن المعترضات هي الأكثر واعدة لحل جميع هذه المشاكل.
يساعد المعترضون على تنظيم المنطق داخل المكون على شكل وحدات معزولة قابلة لإعادة الاستخدام :
يتعارض المعترضون مع فلسفة التفاعل (تدفق البيانات وتكوينها بشكل صريح) وداخل مكون ، وليس فقط بين المكونات . لهذا السبب يبدو لي أن الاعتراضات تتناسب بشكل طبيعي مع نموذج مكون التفاعل.
على عكس الأنماط مثل خصائص العرض أو المكونات ذات الترتيب الأعلى ، لا يستنشق المتشممون شجرة المكونات الخاصة بك بمرفقات عميقة غير ضرورية. أيضا ، ليس لديهم
عيوب متأصلة في الشوائب.
حتى إذا نظرك المعترضون للوهلة الأولى (مثلي تمامًا في البداية!) أوصي بإعطاء هذا الخيار فرصة وتجربته. أعتقد أنك ستحبه.
هو رد فعل رد فعل بسبب اعتراض؟حتى نقوم بتغطية الاعتراضات بالتفصيل ، قد تشعر بالقلق من أن إضافة اعتراضات في React هي مجرد مضاعفة للكيانات. هذا نقد عادل. أعتقد هذا: على الرغم من أنك على المدى القصير ، تشعر حقًا بحمل إدراكي إضافي (لدراستها) ، في النهاية ستشعر بتحسن فقط.
إذا كان المعترضون يتجذرون في مجتمع React ، في الواقع سيتم تقليل عدد الكيانات التي يجب إدارتها عند كتابة تطبيقات React . باستخدام الاعتراضات ، يمكنك استخدام الوظائف باستمرار ، بدلاً من التبديل بين الوظائف والفئات والمكونات الأعلى ترتيبًا وعرض المكونات.
أما بالنسبة للزيادة في حجم التنفيذ ، فإن تطبيق React بدعم من اعتراضات يزيد بمقدار حوالي 1.5 كيلوبايت تقريبًا (min + gzip). على الرغم من أن هذا في حد ذاته ليس كثيرًا ، إلا أنه من المحتمل جدًا أنه
عند استخدام المعترضات ، فإن حجم التجميع الخاص بك سوف ينخفض ، حيث يتم عادة تقليل كود المعترض بشكل أفضل من التعليمات البرمجية المكافئة باستخدام الفئات. المثال التالي متطرف قليلاً ، ولكنه يوضح بوضوح سبب كل شيء (
انقر لتوسيع الخيط بأكمله):
لا توجد تغييرات ثورية لاقتراح المعترض . سيعمل رمزك بشكل جيد حتى إذا بدأت في استخدام اعتراضات في مكونات جديدة. في الواقع ، هذا بالضبط ما نوصي به: لا تعيد كتابة أي شيء عالميًا! سيكون من الحكمة الانتظار حتى يتم تحديد استخدام اعتراضات في جميع التعليمات البرمجية الحرجة. ومع ذلك ، سنكون ممتنين إذا كان بإمكانك تجربة إصدار ألفا 16.7 وترك لنا ملاحظات حول
الاقتراح الخاص بالمعترضات ، وكذلك
الإبلاغ عن أي أخطاء .
ما هو - اعتراض؟لفهم ما هي الاعتراضات ، تحتاج إلى الرجوع خطوة واحدة والتفكير في إعادة استخدام التعليمات البرمجية.
هناك طرق عديدة لإعادة استخدام المنطق في تطبيقات React اليوم. لذا ، لحساب شيء ما ، يمكنك كتابة وظائف بسيطة ، ثم استدعاءها. يمكنك أيضًا كتابة المكونات (والتي يمكن أن تكون بحد ذاتها وظائف أو فئات). المكونات أكثر قوة ، ولكن عند العمل معها ، تحتاج إلى عرض بعض واجهة المستخدم. لذلك ، فإن استخدام المكونات غير مريح لنقل المنطق غير المرئي. لذلك نأتي إلى أنماط معقدة مثل خصائص العرض ومكونات النظام الأعلى.
ألن يكون رد الفعل سهلاً إذا كانت هناك طريقة عامة واحدة لإعادة استخدام التعليمات البرمجية فيه ، وليس كثيرًا؟تبدو الوظائف مثالية للرمز القابل لإعادة الاستخدام. يعد تمرير المنطق بين الدوال هو الأقل تكلفة. ومع ذلك ، لا يمكن تخزين الحالة المحلية لـ React داخل الوظائف. لا يمكنك استخراج سلوك مثل "حجم نافذة المسار وحالة التحديث" أو "تحريك قيمة لبعض الوقت" من مكون فئة دون إعادة هيكلة الكود أو دون تقديم تجريدات مثل Observables. كلتا الطريقتين لا تؤدي إلا إلى تعقيد الشفرة ، و React لطيف بالنسبة لنا ببساطته.
اعتراض المعترضين على حل هذه المشكلة بالذات. بفضل الاعتراضات ، يمكنك استخدام ميزات رد الفعل (على سبيل المثال ، الحالة) من دالة - عن طريق استدعاءها مرة واحدة فقط. يوفر React عدة اعتراضات مدمجة تتوافق مع الطوب المتفاعل: الحالة ودورة الحياة والسياق.
نظرًا لأن المعترضات هي وظائف JavaScript عادية ، يمكنك الجمع بين المعترضات المضمنة المتوفرة في React لإنشاء "اعتراضات أصلية" . وبالتالي ، يمكن حل المشكلات المعقدة باستخدام سطر واحد من التعليمات البرمجية ، ثم ضربها في تطبيقك ، أو
مشاركتها في مجتمع Reactتحذير: بالمعنى الدقيق للكلمة ، المعترضات الخاصة بك ليست من بين ميزات React. تنبع القدرة على كتابة اعتراضاتك الخاصة بشكل طبيعي من تنظيمهم الداخلي.
أرني الرمز!افترض أننا نريد الاشتراك في عرض النافذة الحالي (على سبيل المثال ، لعرض محتوى آخر أو منطقة عرض أضيق).
يمكن كتابة رمز مماثل اليوم بعدة طرق. على سبيل المثال ، لإنشاء فصل دراسي ، قم بإنشاء العديد من طرق دورة الحياة ، أو ربما تلجأ إلى خصائص العرض أو تطبيق مكون عالي الترتيب إذا كنت تبحث عن إعادة الاستخدام. ومع ذلك ، أعتقد أن لا شيء يقارن بهذا:
gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eaeإذا قرأت هذا الرمز ، فهذا يعني أنه يفعل بالضبط ما يقوله . نستخدم عرض النافذة داخل المكون الخاص بنا ، ويعيد التفاعل رسم المكون إذا تغير. هذا هو بالضبط ما يحتاجه المعترضون - لجعل المكونات معلنة حقًا ، حتى لو كانت تحتوي على آثار جانبية وأعراض.
ضع في اعتبارك كيف يمكن تنفيذ هذا المعترض الخاص. يمكننا استخدام حالة رد الفعل المحلية للحفاظ على عرض النافذة الحالي فيه ، وتعيين الحالة عند تغيير حجم النافذة باستخدام تأثير جانبي:
gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eaeكما هو موضح أعلاه ، فإن اعتراضات
useState مثل
useState و
useEffect بمثابة الطوب. يمكننا استخدامها مباشرة من
useWindowWidth ، أو تجميع اعتراضاتنا الخاصة بهم منها ، على سبيل المثال ،
useWindowWidth . يبدو أن استخدام المعترضات الخاصة بك ليس أقل استقلالية من العمل مع واجهة برمجة التطبيقات التفاعلية المضمنة.
اقرأ المزيد عن الاعتراضات المدمجة في
هذه المراجعة .
يتم تغليف المعترضات - في كل مرة يتم استدعاء المعترض ، يتلقى حالة محلية معزولة داخل المكون الذي يتم تنفيذه حاليًا . في هذا المثال بالذات ، هذا ليس مهمًا (عرض النافذة هو نفسه لجميع المكونات!) ، ولكن هذا هو بالضبط ما تكمن فيه قوة المعترضات! إنهم يقصدون أن يفصلوا ليس منطق الدولة ، بل منطق الحفاظ على الدولة.
لا نريد كسر تدفق البيانات في اتجاه التيار!قد يحتوي كل اعتراض على بعض الآثار الجانبية المحلية والحالة. يمكنك نقل البيانات بين اعتراضات متعددة ، تمامًا كما يحدث عادةً بين الوظائف. يمكنهم أخذ الحجج وإرجاع القيم لأنها وظائف JavaScript.
فيما يلي مثال على مكتبة الرسوم المتحركة المتفاعلة حيث نقوم بتجربة المعترضات:
لاحظ كيف يتم تنفيذ الرسوم المتحركة المذهلة في التعليمات البرمجية المصدر المعروضة: نقوم بتمرير القيم بين اعتراضات محلية متعددة داخل نفس وظيفة العرض.
odesandbox.io/s/ppxnl191zx(هذا المثال تمت مناقشته بمزيد من التفصيل في
هذا الدليل .)
نظرًا للقدرة على نقل البيانات بين المعترضات ، فهي ملائمة جدًا لتنفيذ الرسوم المتحركة والاشتراك في البيانات وإدارة النماذج والعمل مع التجريدات الأخرى ذات الحالة.
على عكس خصائص التقديم أو المكونات ذات الترتيب الأعلى ، لا يقوم المعترضون بإنشاء "تسلسل هرمي خاطئ" في شجرة التجسيد الخاصة بك . وهي أشبه بقائمة ثنائية الأبعاد "لخلايا الذاكرة" مرتبطة بمكون. لا مستويات إضافية.
ماذا عن الفصول؟في اعتقادنا ، فإن اعتراضاتنا هي أكثر التفاصيل إثارة للاهتمام في العرض بأكمله. ولكن من أجل أن تكون المعترضات الخاصة بها فعالة ، يجب أن توفر React على مستوى الوظائف القدرة على إعلان الحالة والآثار الجانبية. هذا هو بالضبط ما يسمح لنا بعمل اعتراضات
useState مثل
useState و
useEffect . اقرأ المزيد عن هذا في
الوثائق .
اتضح أن هذه الاعتراضات المدمجة مريحة ليس فقط عند إنشاء اعتراضاتك الخاصة. كما أنها كافية لتحديد المكونات ككل ، لأنها تزودنا بالقدرات اللازمة - على سبيل المثال ، الحالة. لهذا السبب نود أن تصبح الاعتراضات الوسيلة الأساسية لتحديد مكونات التفاعل في المستقبل.
لا ، نحن لا نخطط لإلغاء الطبقات تدريجياً. نحن نستخدم عشرات الآلاف من مكونات الصف على Facebook ونحن (مثلك تمامًا) لا نريد إعادة كتابتها على الإطلاق. ولكن ، إذا بدأ مجتمع رد الفعل في استخدام اعتراضات ، فسيكون من غير المناسب الحفاظ على الطريقتين الموصى بهما لكتابة المكونات. يغطي المعترضون جميع الحالات العملية التي يتم فيها استخدام الفصول الدراسية ، ولكنهم يوفرون مرونة أكبر عند استخراج الشفرة واختبارها وإعادة استخدامها. لهذا السبب نربط المعترضين بأفكارنا حول مستقبل React.
ماذا لو كانت الاعتراضات سحرية؟ربما
ستحير قواعد المعترض لك.
على الرغم من أنه ليس من المعتاد استدعاء المعترض في المستوى العلوي ، فمن المحتمل ألا ترغب في تحديد الحالة في الحالة بنفسك ، حتى لو استطعت . على سبيل المثال ، لا يمكن تحديد حالة مرتبطة بالشرط في الفصل الدراسي ، ولمدة أربع سنوات من التواصل مع مستخدمي React ، لم أسمع أي شكاوى حول هذا الأمر.
مثل هذا التصميم أمر بالغ الأهمية لإدخال اعتراضاتك الخاصة دون إدخال ضوضاء مفرطة في بناء الجملة أو خلق مخاطر. نحن نفهم أنه من الصعب عادة ، ولكننا نعتقد أن هذا الحل الوسط مقبول ، بالنظر إلى الفرص التي يوفرها. إذا كنت لا توافق على ذلك ، أقترح أن تجرب نفسك وتجرب كيف تحب هذا النهج.
لقد استخدمنا خطاطيف الإنتاج لمدة شهر الآن لمعرفة ما إذا كانت القواعد الجديدة ستربك المبرمجين. تبين الممارسة أن الشخص يتقن المعترض في غضون ساعات. أعترف أن هذه القواعد بدا لي للوهلة الأولى بدعة ، لكن هذا الشعور سرعان ما مرت. كان هذا هو الانطباع الذي شعرت به عندما قابلت رد الفعل لأول مرة. (لم يعجبك رد فعل؟ وأعجبني فقط للمرة الثانية.)
يرجى ملاحظة: على مستوى تنفيذ المعترضات لا يوجد سحر أيضًا. وفقًا
لـ Jamie ، تحصل على شيء من هذا القبيل:
gist.github.com/gaearon/62866046e396f4de9b4827eae861ff19نحتفظ بقائمة اعتراضية من الاعتراضات ، وننتقل إلى المكون التالي في القائمة في كل مرة تستخدم فيها اعتراضًا. بفضل قواعد الاعتراض ، فإن ترتيبهم هو نفسه في أي محرك عرض ، لذلك مع كل مكالمة يمكننا تزويد المكون بالحالة الصحيحة.
(
في هذه المقالة من رودي ياردلي ، يتم شرح كل شيء بشكل جميل في الصور!)
ربما تساءلت أين تخزن شركة React حالة الاعتراضات. في نفس مكان حالة الطبقات. يحتوي React على قائمة انتظار داخلية للتحديث تحتوي على الحقيقة المطلقة لكل حالة ، بغض النظر عن كيفية تعريف مكوناتك.
المعترضين مستقلون عن الوكلاء والرسائل ، وهي شائعة جدًا في مكتبات جافا سكريبت الحديثة. لذلك ، يمكن القول بأن السحر المعترض أقل سحراً منه في الأساليب الشعبية الأخرى لحل مثل هذه المشاكل. لا يزيد عن في
array.push و
array.pop (في هذه الحالة يكون ترتيب المكالمات مهمًا أيضًا!)
لا يرتبط تصميم المعترض برد الفعل. في الواقع ، بعد بضعة أيام من نشر الاقتراح ، عرضت علينا مجموعة متنوعة من الأشخاص تطبيقات تجريبية لواجهة برمجة التطبيقات المعترضة نفسها لـ Vue ، ومكونات الويب ، وحتى وظائف JavaScript العادية.
أخيرًا ، إذا كنت مخلصًا بشكل متعصب للبرمجة الوظيفية ، وكنت غير مرتاح عندما يبدأ React في الاعتماد على حالة قابلة للتغيير كجزء من التنفيذ. ولكن ، قد يريحك أن معالجة المعترض يمكن تنفيذها في شكلها الخالص ، وتقتصر على التأثيرات الجبرية (إذا كانت مدعومة في JavaScript). بطبيعة الحال ، على مستوى النظام الداخلي ، اعتمد React دائمًا على حالة قابلة للتغيير - وهذا هو بالضبط ما تريد تجنبه.
بغض النظر عن وجهة النظر الأقرب إليك - واقعية أو عقائدية - آمل أن يبدو أحد هذه الخيارات على الأقل منطقيًا بالنسبة لك. الأهم من ذلك ، في رأيي ، أن المعترضين يبسط عملنا ، ويصبح أكثر ملاءمة للمستخدمين للعمل. هذا ما يرشوني المعترضون بهذه الطريقة.