شرح - ما هو الفرق بين componentWillMount و componentDidMount في ReactJS؟




ماهو ترجمة (6)

componentWillMount هو في الأساس منشئ. يمكنك تعيين خصائص المثيلات التي لا تؤثر على العرض ، وسحب البيانات من متجر بشكل متزامن و setState معها ، وغيرها من التعليمات البرمجية المجانية البسيطة الأخرى التي تحتاج إلى تشغيلها عند إعداد المكون الخاص بك.

نادرًا ما تكون هناك حاجة إليها ، وليس على الإطلاق مع فصول ES6.

نظرت إلى وثائق Facebook على https://facebook.github.io/react/docs/component-specs.html وتذكر كيف تم استدعاء componentWillMount على الخادم / العميل في حين يتم استدعاء componentDidMount فقط على العميل. ماذا يفعل componentWillMount إلى الخادم؟


componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

هناك "gotcha" ، على الرغم من: لن يتم إرجاع استدعاء غير متزامن لجلب البيانات قبل حدوث التقديم. وهذا يعني أن المكون سيتم عرضه ببيانات فارغة مرة واحدة على الأقل.

ليست هناك طريقة لتقديم العرض "مؤقتًا" لانتظار وصول البيانات. لا يمكنك إرجاع وعد من componentWillMount أو مشاحنات في setTimeout بطريقة أو بأخرى.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

لن يتمكن المكون الخاص بنا من الوصول إلى واجهة المستخدم الأصلية (DOM ، إلخ). كما لن نتمكن من الوصول إلى الأطفال الذين يقومون بالحجز ، لأنهم لم يخلقوا بعد. يعد componentWillMount () فرصة لنا للتعامل مع التكوين ، وتحديث حالتنا ، والتحضير بشكل عام للمجموعة الأولى. وهذا يعني أنه يمكننا البدء في إجراء العمليات الحسابية أو العمليات استنادًا إلى قيم الدعامة.


يتم تنفيذ componentWillMount قبل العرض الأولي للمكون ، ويتم استخدامه لتقييم الدعائم والقيام بأي منطق إضافي يستند إليها (عادة لتحديث الحالة أيضًا) ، وعلى هذا النحو يمكن إجراؤه على الخادم من أجل الحصول على أول جانب خادم ترميز المقدمة.

يتم تنفيذ componentDidMount بعد العرض الأولي عند تحديث DOM (ولكن بشكل حاسم قبل رسم تحديث DOM هذا للمتصفح ، مما يتيح لك القيام بكل أنواع التفاعلات المتقدمة مع DOM نفسه). هذا بالطبع لا يمكن أن يحدث إلا في المتصفح نفسه وبالتالي لا يحدث كجزء من SSR ، حيث يمكن للملقم إنشاء علامات فقط وليس DOM نفسه ، ويتم ذلك بعد أن يتم إرساله إلى المتصفح في حالة استخدام SSR

التفاعلات المتقدمة مع DOM تقول؟ Whaaaat ؟؟ ... Yep - عند هذه النقطة لأنه تم تحديث DOM (لكن المستخدم لم يشاهد التحديث في المتصفح حتى الآن) فمن الممكن اعتراض الرسم الفعلي على الشاشة باستخدام window.requestAnimationFrame ثم القيام بأشياء مثل قم بقياس عناصر DOM الفعلية التي سيتم إخراجها ، والتي يمكنك إجراء تغييرات إضافية على الحالة فيها ، مفيدة جدًا على سبيل المثال تحريك إلى ارتفاع عنصر يحتوي على محتويات طول متغير غير معروفة (كما يمكنك الآن قياس المحتويات وتعيين ارتفاع إلى ) ، أو لتجنب وميض سيناريوهات المحتوى أثناء تغيير بعض الحالات.

كن حذرًا جدًا لحراسة التغييرات التي تطرأ على الحالة في أي componentDid... حيث يمكن أن يتسبب في حدوث حلقة لانهائية لأن تغيير الحالة سيؤدي أيضًا إلى إعادة العرض ، وبالتالي componentDid... آخرًا componentDid... ثم تشغيل وإيقاف


طريقة constructor ليست هي نفسها مثل componentWillMount .

وفقا لمؤلف Redux ، فمن المخاطرة لإرسال إجراءات من المنشئ لأنه قد يؤدي إلى تحور الدولة أثناء التقديم.

ومع ذلك ، الإرسال من componentWillMount على ما يرام.

من قضية جيثب :

يحدث هذا عندما يؤدي dispatch () داخل منشئ مكون واحد في setState () داخل مكون آخر. يتتبع React "المالك الحالي" لمثل هذه التحذيرات - ويعتقد أنه يتم استدعاء setState () داخل المُنشئ عندما يتسبب منشئ تقنيًا setState () داخل جزء آخر من التطبيق. لا أعتقد أننا يجب أن نتعامل مع هذا - إنها مجرد رد فعل تحاول قصارى جهدها للقيام بعملها. الحل هو ، كما لاحظت بشكل صحيح ، لإرسال () داخل componentWillMount () بدلاً من ذلك.


للإضافة إلى ما قاله FakeRainBrigand ، يتم استدعاء componentWillMount عند تقديم رد على الخادم ، ولكن يسمى componentDidMount فقط على العميل.


تفاعل React update() المساعد immutability هو طريقة ملائمة لإنشاء نسخة محدثة من كائن جافا سكريبت قديم عادي دون تحورها.

يمكنك إعطاؤه كائن المصدر ليتم تحديثه وكائن يصف المسارات إلى القطع التي تحتاج إلى تحديث والتغييرات التي يجب إجراؤها.

على سبيل المثال ، إذا كان الإجراء يحتوي على خصائص id link وكنت تريد دفع link إلى مجموعة من الارتباطات في عنصر مرتبط id :

var update = require('react/lib/update')

// ...

return update(state, {
  items: {
    [action.id]: {
      links: {$push: action.link}
    }
  }
})

(مثال يستخدم اسم خاصية محسوبة action.id لـ action.id )





reactjs