يقول مؤلف المذكرة ، الذي ننشره ترجمة اليوم ، أن هناك فجوة بين استخدام React لتطوير واجهات المستخدم والحاجة إلى معرفة كيفية عمل React بالفعل. كثير من الناس الذين يستخدمون React في الممارسة العملية ليسوا على دراية بما يجري في أحشاء هذه المكتبة. هنا ، في شكل رسوم متحركة ، سننظر في بعض العمليات الرئيسية التي تحدث في React أثناء تكوين واجهات المستخدم.
إطلاق تطبيق React
تجدر الإشارة إلى أنه من أجل إنشاء تطبيقات React ، ربما لا تعرف الآليات الداخلية لـ React. لكنني قررت إعداد هذه المادة لجميع أولئك الذين يرغبون ، لأي سبب من الأسباب ، في فهم عمل React بشكل أفضل. يتم تقديم العمليات الموضحة في شكل رسوم متحركة. آمل أن يساعد هذا في جعل تحليلهم أكثر وضوحًا.
الرد ، عند بدء تشغيل التطبيق لأول مرة ، يحمّل فئة
App تلقائيًا إلى الحاوية الجذر للتطبيق.
أول جبل <التطبيق />DOM الظاهري وخوارزمية المقارنة
أثناء عمل النظام الفرعي React الذي ينفذ خوارزمية Diffing ، يتم إجراء بحث عن الاختلافات بين DOMs الظاهرية (نموذج كائن المستند الظاهري ، نموذج المستند الظاهري). تبطئ لفترة من الوقت. اثنين من DOM الظاهري؟ يبدو أن هناك DOM ظاهريًا واحدًا في React ... دعنا نكتشف ذلك. React يقارن DOM الظاهري السابق مع الجديد. لا يتم تحديث DOM المستندة إلى المستعرض إلا إذا تم الكشف عن الاختلافات بينهما عند مقارنة DOMs الظاهري.
الرسوم المتحركة مجردة من خوارزمية مقارنة رد الفعل. إذا تم العثور على اختلاف بين شجريتي DOM الظاهرية ، فسيتم مطابقة DOM الحقيقية في المستعرض بأحدث شجرة DOM افتراضيةالنظر في ما يحدث على الرسوم المتحركة أعلاه.
- في حدث
click ، يتم إجراء API.tweet() مع بيانات طلب POST التي تحتوي على message . - استجابة للطلب ،
payload إرجاع payload ، ويتم إرسال هذه البيانات إلى رد الاتصال (event) => { … } . - إذا تسببت البيانات التي يتم إرجاعها إلى
payload في تغيير props ، فيتم إجراء مقارنة بين أشجار DOM الظاهرية. - إذا تبين أن الأشجار مختلفة ، فسيتم إرسال الشجرة الأحدث إلى المستعرض.
- ثم يصبح DOM الظاهري الجديد قديمًا ، ونتوقع أحداثًا جديدة.
تتفاعل المكونات
المكون React هو مجرد كائن JavaScript. React تنشئ DOM الافتراضية الخاصة بها ، والتي هي طريقة عرض شجرة لهيكل واجهة المستخدم بالكامل. React يخزن شجرة DOM الظاهري في الذاكرة. قبل عرض ما هو موجود في DOM الظاهري فعليًا في نافذة مستعرض ، يمكن لـ React إجراء العديد من العمليات لإضافة عناصر وتحديثها وحذفها من DOM الظاهري.
لا تستخدم طريقة مكون
render() لأي شيء لا يتعلق بتقديم عناصر واجهة المستخدم. إذا كنت بحاجة إلى تغيير حالة أو خصائص أحد المكونات ، فاستخدم الطرق القياسية لدورة حياة مكونات React.
يجب أن تظل طريقة التقديم () دائمًا دالة خالصة.
تقوم طريقة
render() بتحديث المكون الظاهري DOM. إذا كانت شجرة DOM الظاهرية الجديدة مختلفة عن الشجرة المعروضة سابقًا ، فإن React ، بالإضافة إلى تحديث DOM الظاهري ، سيؤدي أيضًا إلى تحديث DOM الحقيقي للمستعرض. لا يتعين على المطور تحديث متصفح DOM مباشرة. تنطبق هذه القاعدة على أي أماكن في رمز تطبيق React. من المهم بشكل خاص عند تطبيقها على وظيفة
render() .
لا تلوث أسلوب التجسيد () مع استدعاءات الدوال التي تقوم بتحديث DOM بطريقة أو بأخرى مباشرةفي طريقة
setState render() ، لا يجب عليك تغيير حالة المكون (حتى باستخدام
setState ) ، وتنفيذ طلبات HTTP. لا تدخل إلى مسج من هذه الطريقة ، لا تنفذ طلبات لتحميل بيانات معينة. الحقيقة هي أن طريقة
render() بحاجة إلى الإبقاء عليها في حالة تكون فيها وظيفة خالصة. يتم استدعاء هذه الطريقة دائمًا في المرحلة الأخيرة من آليات المكون. أثناء تنفيذه ، تحتاج فقط إلى تحديث واجهة المستخدم. من المفترض أن جميع التحديثات على DOM الظاهري قد اكتملت بالفعل.
أحداث دورة حياة المكون
عند تركيب أحد المكونات لأول مرة في DOM ، يقوم React برفع حدث دورة حياة
componentWillMount الخاص به. بعد عرض المكون الظاهري لأول مرة (أي ، يتم تثبيته لأول مرة في DOM الحقيقي للمتصفح) ، يتم استدعاء حدث آخر -
componentDidMount .
من المتوقع أن يتم وصف معظم منطق المكون الذي تم التذرع به خلال جميع مراحل التطبيق على وجه التحديد في أساليب دورة حياته.
النتائج
يستخدم العديد من مطوري React اليوم المكونات والوصلات الوظيفية بدلاً من المكونات القائمة على الفئات وطرق دورة حياتهم. تعتبر أساليب دورة الحياة غير آمنة. إذا كنت تعتقد أن وثائق React ، فربما يتم إهمال هذه الطرق في المستقبل. هذا هو السبب في أن المؤلف يعتبر هذه المقالة بمثابة وصف للتقنيات ، والتي قد يختفي بعضها قريباً. لكنه ، على الرغم من ذلك ، يأمل في أن تكون هذه المواد مفيدة لأولئك الذين بدأوا للتو في التعرف على React ، وأولئك الذين يهتمون بتاريخ تطوير تقنيات تطوير الويب.
أعزائي القراء! هل تستخدم السنانير React؟