الكاتب | مات Maribojoc

المترجم | الجهل

ما هو نهج دورة الحياة؟ وReact16 + نهج جديد دورة الحياة ما هو؟ كيف يمكن فهمها بشكل حدسي، والسبب أنها مفيدة؟

نهج دورة الحياة في النهاية ما هو؟

الرد عنصر ديه مرحلته الخاصة.

إذا كنت ترغب في "بناء مكون مرحبا العالم"، وأعتقد أنك ستفعل:

الطبقة HelloWorld يمتد React.Component { تقديم () { عودة < H1 >  مرحبا العالم < / H1 > } }

عند تقديم عميل هذا العنصر، قد ترى في نهاية المطاف العرض التالي:

وقبل عرض وجهة النظر هذه، وقد ذهب هذا المكون من خلال عدة مراحل. ويشار إلى هذه المراحل عادة باسم دورة حياة المكون.

بالنسبة للبشر، سنذهب من خلال الأطفال والبالغين، ومرحلة المسنين. ولردة الفعل المكون، ولقد شنت وتحديث ومرحلة إلغاء التثبيت.

من قبيل الصدفة، جبل أحد مكونات مثل طفل حديث الولادة في العالم. هذه هي المرة الأولى مكونات لها الحياة. تم إنشاؤه في مرحلة التجميع، ثم يتم إدخالها في DOM.

هذه هي المرحلة الأولى من تجربة التجمع - جبل المسرح.

ولكن الأمر لا ينتهي بهذه الطريقة. تتفاعل مكونات و"تنمو" أو المكونات تمر مرحلة التحديث.

إذا تتفاعل مكونات لا يتم تحديث تجربة المرحلة، أنها ستظل يتم إنشاء الدولة.

سيتم تحديث معظم المكونات - إما عن طريق تعديل الدولة أو الدعائم التي تشهد مرحلة التحديث.

المرحلة الأخيرة هي لإلغاء تثبيت المكونات تخضع المرحلة.

في هذه المرحلة، سوف المكون يكون "ميتة". تتفاعل مع المصطلحات، وهذا يشير إلى إزالة المكون من DOM.

هذه هي كل ما تحتاج لمعرفته حول دورة حياة المكون.

بالمناسبة، تتفاعل الاحتياجات أيضا المكونة للذهاب من خلال مرحلة أخرى. وأحيانا يتم تشغيل التعليمات البرمجية أو في مكان ما حدث خطأ، وهذه المرة المكون يمر معالجة الأخطاء المرحلة، تماما مثل البشر يرى الطبيب.

الآن عليك أن تعرف المراحل الأساسية الأربعة تتفاعل مكونات أو دورة الحياة.

جبل - يتم إنشاء المكونات ثم يتم إدراجها في DOM في هذه المرحلة؛

تحديث المكون --React "يكبر".

إلغاء - المرحلة النهائية.

معالجة الأخطاء - أحيانا رمز لا يمكن تشغيل أو حدث خطأ في مكان ما.

ملاحظة: يردون مكونات قد لا تذهب من خلال جميع المراحل. هو عنصر المرجح أن تفرغ مباشرة بعد جبل - أي تحديث أو معالجة الأخطاء.

فهم المراحل المختلفة لدورة الحياة والأساليب المرتبطة بها

فهم المراحل المختلفة التي مرت بها تجميع سوى جزء من المعادلة، والجزء الآخر هو فهم طريقة المقابلة لكل مرحلة.

ومن المعروف أن طريقة باعتبارها مكونات نهج دورة الحياة.

دعونا ننظر المراحل الأربعة لليتوافق الأسلوب.

دعونا ننظر في طريقة لتركيب المرحلة.

جبل نهج دورة الحياة

يتم إنشاء جبل الوسائل مرحلة من المكون المراد إدراجها في مرحلة DOM.

وهذه المرحلة استدعاء الأسلوب التالية (المذكورة في تسلسل).

 1. منشئ ()

هذا هو الأسلوب الأول يسمى عند "إعادة الحياة" إلى عنصر.

قبل شنت التجميع إلى DOM باستدعاء أسلوب المنشئ.

عادة، سوف تهيئة الدولة وربط معالج الأحداث في طريقة البناء.

هذا مثال بسيط:

CONST MyComponent يمتد React.Component { منشئ (الدعائم) { السوبر (الدعائم) this.state = { نقاط: 0 } this.handlePoints = this.handlePoints.bind (هذا) } }

أعتقد أنك بالفعل على دراية بهذا الأسلوب، لذلك أنا لا تنوي القيام مزيد من التوضيح.

وتجدر الإشارة إلى أن هذا هو ما يسمى الطريقة الأولى - لتركيبها قبل DOM في المكون.

 2. getDerivedStateFromProps ثابت ()

قبل شرح نهج دورة الحياة، واسمحوا لي أن أشرح كيفية استخدام هذا الأسلوب.

البنية الأساسية لهذه الطريقة كما يلي:

CONST MyComponent يمتد React.Component { ... getDerivedStateFromProps ثابت () { // تفعل أشياء هنا } }

يأخذ هذا الأسلوب كما الدعائم المعلمات والدولة:

... getDerivedStateFromProps ثابت (الدعائم، والدولة) { // تفعل أشياء هنا } ...

يمكنك العودة كائن لتحديث حالة المكون:

... getDerivedStateFromProps ثابت (الدعائم، والدولة) { عودة { نقاط: 200 // دولة التحديث مع هذا } } ...

أو عودة لاغية، لا يتم تحديث:

... getDerivedStateFromProps ثابت (الدعائم، والدولة) { عودة لاغية } ...

هل يمكن التفكير، وهذا نهج دورة الحياة أمر بالغ الأهمية بالنسبة لك؟ وهو واحد من نهج دورة الحياة نادرا ما تستخدم، ولكن في بعض الحالات، سوف تأتي في متناول اليدين.

نضع في اعتبارنا أن يسمى هذا الأسلوب قبل هي التي شنت المكون في البداية إلى DOM.

وفيما يلي مثال بسيط:

لنفترض أن هناك عنصر بسيط لتقديم النتيجة فريق كرة القدم.

يتم تخزين عشرات في ولاية لمكون الهدف:

فئة التطبيقات يمتد مكون { = {الدولة النقاط: 10 } تقديم () { عودة ( < شعبة اسم_الفئة = "التطبيق" > < رأس اسم_الفئة = "التطبيق-رأس" > < IMG SRC = {شعار} اسم_الفئة = "التطبيق شعار" بديل = "شعار" / > < ص > لقد سجل {} this.state.points نقطة. < / P > < / رأس > < / شعبة > )؛ } }

وكانت النتائج على النحو التالي:

هو شفرة المصدر متاح في جيثب: الشبكي: //github.com/ohansemmanuel/points

افترض أنك مثل هذا في عشرات أخرى في طريقة getDerivedStateFromProps ساكنة، ثم قدم والنتيجة هي كم؟

فئة التطبيقات يمتد مكون { = {الدولة النقاط: 10 } // ******* // ملاحظة :. ليس الطريقة الموصى بها لاستخدام هذا الأسلوب مجرد مثال تجاوز دون قيد أو شرط الدولة هنا يعتبر عموما فكرة سيئة. // ******** getDerivedStateFromProps ثابت (الدعائم، والدولة) { عودة { النقاط: 1000 } } تقديم () { عودة ( < شعبة اسم_الفئة = "التطبيق" > < رأس اسم_الفئة = "التطبيق-رأس" > < IMG SRC = {شعار} اسم_الفئة = "التطبيق شعار" بديل = "شعار" / > < ص > لقد سجل {} this.state.points نقطة. < / P > < / رأس > < / شعبة > )؛ } }

الآن لدينا getDerivedStateFromProps ثابت أساليب دورة حياة المكون. قبل شنت الجمعية إلى أسلوب DOM يسمى. من خلال العودة كائن، نتمكن من تحديث حالته قبل المقدمة المكون.

سوف نرى:

1000 من getDerivedStateFromProps طريقة تحديث حالة ثابتة.

بالطبع، هذا المثال هو أساسا لغرض التظاهر، طريقة getDerivedStateFromProps ثابت لا ينبغي أن تستخدم لذلك. أفعل ذلك فقط لتمكنك من فهم أساسيات.

يمكننا استخدام هذه الطريقة لتحديث الحالة من دورة الحياة، ولكن هذا لا يعني أن تفعل ذلك. ثابت طريقة getDerivedStateFromProps له السيناريو محددة تطبيقه.

لذلك عندما يجب عليك استخدام getDerivedStateFromProps ساكنة طريقة للقيام بذلك؟

طريقة اسم getDerivedStateFromProps يحتوي على خمس كلمات مختلفة: "الحصول Fromived الدولة من الدعائم".

وكما يوحي اسمها، وهذا الأسلوب يسمح للعنصر لتحديث التغييرات الحالة الداخلية التي تقوم على الدعائم.

أخرى، الدول المكونة التي تم الحصول عليها بهذه الطريقة ويشار إلى كدولة مشتقة.

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

 3. تقديم ()

بعد استدعاء أسلوب getDerivedStateFromProps ثابت، ونهج دورة الحياة القادمة هو تقديم:

الطبقة MyComponent يمتد React.Component { // تقديم هو الأسلوب المطلوب فقط لمكون الطبقة تقديم () { عودة < H1 >  مرحى! < / H1 > } }

إذا كنت ترغب في تقديم عناصر في DOM، يمكنك كتابة التعليمات البرمجية لتقديم أسلوب بإرجاع بعض JSX.

يمكنك أيضا العودة سلاسل نقية والأرقام، على النحو التالي:

الطبقة MyComponent يمتد React.Component { تقديم () { العودة "يا هلا" } }

أو شظايا والعوائد صفيف، على النحو التالي:

الطبقة MyComponent يمتد React.Component { تقديم () { العودة < < شعبة مفتاح = "1" > مرحبا < / شعبة > ، < شعبة مفتاح = "2" > عالم < / شعبة > >. } } الطبقة MyComponent يمتد React.Component { تقديم () { عودة < React.Fragment > < شعبة > مرحبا < / شعبة > < شعبة > عالم < / شعبة > < /React.Fragment > } }

إذا كنت لا ترغب في تقديم أي محتوى، يمكنك إرجاع قيمة منطقية، أو لاغية في طريقة تقديم:

الطبقة MyComponent يمتد React.Component { تقديم () { عودة لاغية } } الطبقة MyComponent يمتد React.Component { // تخمين ما عاد هنا؟ تقديم () { عودة (2 + 2 === 5) && < شعبة > مرحبا العالم < / شعبة > . } }

يمكنك أيضا العودة من بوابة جعل الأسلوب:

الطبقة MyComponent يمتد React.Component { تقديم () { عودة createPortal (this.props.children، document.querySelector ( "الهيئة"))؛ } }

ملاحظة هامة حول أسلوب تقديم و، لا تستدعي setState في وظيفة أو التفاعل مع حدث API الخارجي.

 4. componentDidMount ()

بعد استدعاء تقديم والتجمع هي التي شنت على DOM، وطريقة الدعوة componentDidMount.

بعد تحميل التجميع إلى DOM سوف استدعاء هذه الدالة على الفور.

في بعض الأحيان كنت بحاجة للحصول على الفور بعد جبل عنصر التجميع من DOM شجرة العقدة، وهذه المرة يمكنك استدعاء هذه الأساليب دورة حياة المكون.

على سبيل المثال، قد يكون لديك إطار مشروط، وتريد أن تجعل الإطارات مشروط المحتوى في عنصر معين DOM، يمكنك القيام بذلك:

الطبقة ModalContent يمتد React.Component { شرم = document.createElement ( "قسم")؛ componentDidMount () { document.querySelector ( "الجسم) .appendChild (this.el)؛ } // استخدام البوابة، سيتم تقديم محتوى الوسائط في العنصر DOM تعلق على DOM في طريقة componentDidMount. }

إذا كنت ترغب في إرسالها إلى DOM في مكون شنت طلب على الفور الشبكة، ويمكن أن يتم هذا الأسلوب في:

componentDidMount () { this.fetchListOfTweets () // حيث fetchListOfTweets يبادر طلب netowrk لجلب قائمة معينة من تويت. }

يمكنك أيضا إعداد اشتراك، مثل جهاز توقيت:

// منها مثلا requestAnimationFrame componentDidMount () { window.requestAnimationFrame (this._updateCountdown)؛ } // منها مثلا المستمعين الحدث componentDidMount () { el.addEventListener () }

فقط للتأكد من إلغاء الاشتراك عند إلغاء تثبيت المكون، وسوف نقدم المزيد من التفاصيل عند مناقشة componentWillUnmount نهج دورة الحياة.

جبل أساسا هذه المرحلة، دعونا نلقي نظرة الآن في المرحلة التالية من تجربة التجمع - مرحلة التحديث.

تحديثات نهج دورة الحياة

كلما تغير يردون مكونات الدولة أو الدعائم، وسوف يكون مكونات إعادة المقدمة. ببساطة، وهذا هو، يتم تحديث المكون. هذه هي المكونات المحدثة مراحل دورة الحياة.

حتى عند تحديث نهج دورة الحياة مكون التي المكالمات؟

 1. getDerivedStateFromProps ثابت ()

أولا وقبل كل شيء، ونحن سوف استدعاء الأسلوب getDerivedStateFromProps ثابت. هذا هو الأسلوب الأول يسمى. لأنه قبل وقد تم إدخال هذه الطريقة، لن يتم شرحها هنا.

لاحظ أن هذا الأسلوب سوف يطلق في جبل لومراحل التحديث.

 2. shouldComponentUpdate ()

بعد استدعاء أسلوب getDerivedStateFromProps ساكنة، ثم استدعاء الأسلوب nextComponentUpdate.

افتراضيا، أو في معظم الحالات، عندما غيرت الدولة أو الدعائم ستكون-تقديم إعادة المكونات. ومع ذلك، يمكنك أيضا التحكم في هذا السلوك.

يمكنك إرجاع --true قيمة منطقية أو خاطئة في هذا الأسلوب لمراقبة ما إذا كانت أو تقديم إعادة المكونات.

ويستخدم هذا نهج دورة الحياة أساسا إلى الأداء الأمثل. ومع ذلك، إذا كانت الدولة والدعائم أي تغيير، لا أريد أن إعادة تقديم عنصر، يمكنك أيضا استخدام المدمج في PureComponent.

  3. تقديم ()

بعد استدعاء داعيا طريقة shouldComponentUpdate فورا render-- اعتمادا على القيمة التي تم إرجاعها shouldComponentUpdate، الافتراضي هو الصحيح.

 4. getSnapshotBeforeUpdate ()

بعد استدعاء أسلوب تقديم، ثم استدعاء الأسلوب getSnapshotBeforeUpdatelifcycle.

أنت لن بالضرورة استخدام هذا نهج دورة الحياة، ولكن في بعض الحالات الخاصة التي قد تأتي في متناول اليدين، وخصوصا عندما كنت بحاجة للحصول على بعض المعلومات من بعد DOM تحديثها.

وتجدر الإشارة إلى أن قيمة طريقة getSnapshotBeforeUpdate تم الحصول عليها من القيمة المرجعية DOM DOM التحديثات من قبل، حتى قبل استدعاء الأسلوب تقديم.

نحن نستخدم بوابة باعتبارها القياس.

عند كتابة التعليمات البرمجية، يتم تخزين لك مؤقتا قبل أن يدفع رمز إلى رمز قاعدة.

قبل افتراض أن التغيير يتم الضغط لاستدعاء وظائف DOM لجعل التغيير مؤقت. لذلك، قبل DOM التحديث الفعلي، حصلت على معلومات getSnapshotBeforeUpdate النقاط للمعلومات DOM قبل التحديث.

التحديثات إلى DOM قد يكون غير متزامن، ولكن تسمى طريقة دورة حياة getSnapshotBeforeUpdate فورا قبل تحديث DOM.

إذا كنت لا تزال لا أفهم تماما لي أن أقدم لكم مثالا آخر.

تطبيق الدردشة هو السيناريو النموذجي لهذا نهج دورة الحياة.

واضاف لقد الأجزاء للدردشة قبل تطبيق العينة.

يمكنك مشاهدة الجزء على حق؟

جراب دردشة بسيط جدا لتحقيق، وكنت قد فكرت. وهناك قائمة غير مرتبة مع مكون في مكون التطبيقات دردشات:

< المجاهدين اسم_الفئة = "الدردشة موضوع" > < دردشات chatList = {this.state.chatList} / > < / UL >

دردشات المكونة لتقديم قائمة الدردشة، التي يحتاجها دعامة chatList. انها اساسا مجموعة، مجموعة من ثلاثة سلاسل تشمل ما يلي: .

دردشات تحقيق العناصر التالية:

الطبقة دردشات يمتد مكون { تقديم () { عودة ( < React.Fragment > {This.props.chatList.map ((دردشة، ط) = >  ( < مفتاح لى = {أنا} اسم_الفئة = "دردشة الشيشة" > {الدردشة} < / لي > ))} < /React.Fragment > )؛ } }

أنها ليست سوى عن طريق تعيين chatList دعامة وتقديم عنصر قائمة أنماط قائمة البند ويشبه الفقاعات.

شيء آخر، هناك زر "إضافة الدردشة" في الجزء العلوي من الجزء الدردشة.

زر في أعلى الجزء لرؤية دردشة حتى الآن؟

يؤدي النقر على هذا الزر إضافة نص دردشة الجديد "مرحبا"، على النحو التالي:

كما هو الحال مع معظم تطبيقات الدردشة، وهنا، هناك مشكلة: كلما كان عدد الرسائل يتجاوز ارتفاع نافذة الدردشة، يجب أن يكون السلوك المتوقع دردشة التلقائي جزء إلى التمرير لأسفل لمشاهدة أحدث رسائل الدردشة. الكبير ليس هو الحال الآن.

دعونا ننظر كيفية استخدام getSnapshotBeforeUpdate نهج دورة الحياة في حل هذه المشكلة.

عندما يدعو احتياجات طريقة getSnapshotBeforeUpdate عليه قبل الدعائم والدولة كمعلمة إلى ذلك.

يمكننا استخدام المعلمات prevProps وprevState، على النحو التالي:

getSnapshotBeforeUpdate (prevProps، prevState) { }

يمكن إجراء هذا الأسلوب بإرجاع قيمة أو باطل:

getSnapshotBeforeUpdate (prevProps، prevState) { قيمة الإرجاع || اغية // حيث "القيمة" هي قيمة جافا سكريبت صالحة }

بغض النظر عن ما إرجاع الأسلوب قيمة، سيتم تمريرها إلى نهج آخر دورة الحياة.

getSnapshotBeforeUpdate نهج دورة الحياة نفسها لا تلعب أي دور، فإنه يتطلب نهج دورة الحياة جنبا إلى جنب مع componentDidUpdate معا.

عليك أولا أن نتذكر هذا، دعونا نلقي نظرة على componentDidUpdate نهج دورة الحياة.

 5. componentDidUpdate ()

بعد استدعاء getSnapshotBeforeUpdate نسمي هذا نهج دورة الحياة. مثل طريقة getSnapshotBeforeUpdate، قبل أن يتلقى الدعائم المعلمات والدولة:

componentDidUpdate (prevProps، prevState) { }

ولكن هذا ليس كل شيء.

لا يهم ما، سيتم تمرير قيمة الإرجاع من أسلوب getSnapshotBeforeUpdate دورة الحياة قيمة الإرجاع كثالث أسلوب المعلمة componentDidUpdate.

دعونا نعود قيمة يسمى لقطة، لذلك:

componentDidUpdate (prevProps، prevState، لقطة) { }

مع هذه، دعونا الدردشة موقف التمرير تلقائيا على حل المشاكل.

لحل هذه المشكلة، ولست بحاجة للتذكير (أو تعليم) DOM لك بعض المعرفة من الهندسة.

ما يلي هو رمز للحفاظ على موقف التمرير المرجوة من الجزء الدردشة:

getSnapshotBeforeUpdate (prevProps، prevState) { إذا (this.state.chatList >  prevState.chatList) { CONST chatThreadRef = this.chatThreadRef.current. العودة chatThreadRef.scrollHeight - chatThreadRef.scrollTop. } العودة فارغة؛ } componentDidUpdate (prevProps، prevState، لقطة) { إذا (لقطة! == فارغة) { CONST chatThreadRef = this.chatThreadRef.current. chatThreadRef.scrollTop = chatThreadRef.scrollHeight - لقطة. } }

هذا هو نافذة الدردشة:

الرقم يسلط الضوء على منطقة لتخزين رسالة دردشة الفعلية (قائمة غير مرتبة المجاهدين).

واضاف لدينا رد فعل المرجع في المجاهدين في:

< المجاهدين اسم_الفئة = "الدردشة موضوع" المرجع = {this.chatThreadRef} > ... < / UL >

أولا، لأن التحديث getSnapshotBeforeUpdate يمكن تشغيلها من قبل أي عدد من الدعائم أو تحديث الدولة، ونحن سيتم الحكم عليها من خلال حالة ما إذا كانت رسائل الدردشة الجديدة:

getSnapshotBeforeUpdate (prevProps، prevState) { إذا (this.state.chatList >  prevState.chatList) { // الكتابة المنطق هنا } }

getSnapshotBeforeUpdate يجب إرجاع قيمة. إذا لم تقم بإضافة رسالة دردشة جديدة، فإنه يعود لاغية:

getSnapshotBeforeUpdate (prevProps، prevState) { إذا (this.state.chatList >  prevState.chatList) { // الكتابة المنطق هنا } عودة لاغية }

ننظر الآن في كامل طريقة متاحة getSnapshotBeforeUpdate:

getSnapshotBeforeUpdate (prevProps، prevState) { إذا (this.state.chatList >  prevState.chatList) { CONST chatThreadRef = this.chatThreadRef.current. العودة chatThreadRef.scrollHeight - chatThreadRef.scrollTop. } العودة فارغة؛ }

دعونا النظر في الحالة التي لا يتجاوز جميع رسائل الدردشة ارتفاع ذروة الجزء الدردشة.

التعبير chatThreadRef.scrollHeight - chatThreadRef.scrollTop يعادل chatThreadRef.scrollHeight - 0.

قيمة هذا التعبير تساوي ارتفاع الجزء دردشة scrollHeight-- قبل الرسالة الجديدة في DOM.

وقد بينا سابقا، فإن القيمة التي تم إرجاعها من أسلوب getSnapshotBeforeUpdate سيتم تمريرها طريقة componentDidUpdate كمعلمة الثالثة، وهي لقطة:

componentDidUpdate (prevProps، prevState، لقطة) { }

هذه القيمة هي scrollHeight قبل DOM التحديث.

طريقة componentDidUpdate لديه البرمجية التالية، ولكن لديهم ما أثر؟

componentDidUpdate (prevProps، prevState، لقطة) { إذا (لقطة! == فارغة) { CONST chatThreadRef = this.chatThreadRef.current. chatThreadRef.scrollTop = chatThreadRef.scrollHeight - لقطة. } }

في الواقع، نحن من أعلى إلى أسفل جزء التمرير الرأسي برمجيا، والمسافة تساوي chatThreadRef.scrollHeight - لقطة؛

لأن لقطة تشير scrollHeight قبل التحديث، والتعبير أعلاه إرجاع ارتفاع رسائل الدردشة الجديدة، وأي ارتفاع آخر ذي صلة ويرجع ذلك إلى نتيجة من التحديث. انظر أدناه:

عندما كله جزء الرسالة دردشة شغلها للغاية (والذي تمريره صعودا) عندما إرجاع الأسلوب getSnapshotBeforeUpdate لقطة سوف يكون مساويا لارتفاع الفعلي للجزء الدردشة.

componentDidUpdate وscrollTop قيمة إضافية لمجموع ذروة الرسالة، وهو ما نريد.

نهج إلغاء تثبيت دورة الحياة

وهذا استدعاء الأسلوب التالي لإلغاء المرحلة المكون.

 componentWillUnmount ()

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

// منها مثلا إضافة المستمع الحدث componentDidMount () { el.addEventListener () } // منها مثلا إزالة المستمع الحدث componentWillUnmount () { el.removeEventListener () }

خطأ التعامل مع نهج دورة الحياة

في بعض الأحيان سوف المكون من مشاكل، ورمي خطأ. عندما المتحدرين من هذا المكون (أي المجالس المكونة أدناه) رميات الخطأ، استدعاء الأسلوب التالي.

دعونا تنفيذ عنصر بسيط لأخطاء التطبيق التجريبي القبض عليه. ولهذه الغاية، سوف نقوم بإنشاء عنصر جديد يسمى ErrorBoundary من.

هذا هو الأكثر التنفيذ الأساسي:

استيراد تتفاعل، {} مكون من 'رد فعل'؛ الطبقة ErrorBoundary يمتد مكون { = دولة {}؛ تقديم () { العودة فارغة؛ } } تصدير الافتراضي ErrorBoundary.

 ثابت getDerivedStateFromError ()

عندما المتحدرين من هذا المكون يلقي خطأ، أولا استدعاء هذا الأسلوب، ورمي خطأ كمعلمة.

بغض النظر عن ما إرجاع الأسلوب قيمة، سيتم استخدامها لتحديث الدولة التجمع.

دعونا مكونات ErrorBoundary تستخدم هذا نهج دورة الحياة:

استيراد تتفاعل، {} مكون من "رد فعل". الطبقة ErrorBoundary يمتد مكون { = دولة {}؛ ثابت getDerivedStateFromError (خطأ) { console.log ( `سجل خطأ من getDerivedStateFromError: $ {خطأ}`). عودة {hasError: صحيح}؛ } تقديم () { العودة فارغة؛ } } تصدير الافتراضي ErrorBoundary.

الآن، طالما أن أبناء هذا المكون يلقي خطأ، سيتم تسجيل خطأ إلى وحدة التحكم، وطريقة getDerivedStateFromError بإرجاع كائن التي سيتم استخدامها لتحديث الدولة المكونة ErrorBoundary.

 componentDidCatch ()

بعد المتحدرين من هذا المكون يلقي خطأ، وتسمى أيضا طريقة componentDidCatch. بالإضافة إلى الخطأ القيت، سيكون هناك حجة أخرى، والذي يحتوي على مزيد من المعلومات حول الخطأ:

componentDidCatch (خطأ، معلومات) { }

في هذه الطريقة، سوف تتلقى الخطأ أو المعلومات المرسلة إلى خدمة تسجيل الخارجية. وgetDerivedStateFromError مختلفة، يسمح componentDidCatch إلى تحتوي على شفرة يسبب آثارا جانبية:

componentDidCatch (خطأ، معلومات) { // يسمح logToExternalService (خطأ المعلومات) هذا. // أين قد logToExternalService إجراء مكالمة API. }

دعونا مكونات ErrorBoundary تستخدم هذا نهج دورة الحياة:

استيراد تتفاعل، {} مكون من "رد فعل". الطبقة ErrorBoundary يمتد مكون { الدولة = {hasError: كاذبة}؛ ثابت getDerivedStateFromError (خطأ) { console.log ( `سجل خطأ من getDerivedStateFromError: $ {خطأ}`). عودة {hasError: صحيح}؛ } componentDidCatch (خطأ، معلومات) { console.log ( `سجل خطأ من componentDidCatch: $ {خطأ}`). console.log (مزيد من التفاصيل). } تقديم () { عودة لاغية } } تصدير الافتراضي ErrorBoundary.

وبالإضافة إلى ذلك، منذ ErrorBoundary لا يمكن إلا أن قبض أخطاء القيت من قبل أحفاد هذا المكون، ولذا فإننا سوف تتيح تقديم مكون مرت في الأطفال، أو يعرض خطأ UI الافتراضي عند حدوث خطأ:

... تقديم () { إذا (this.state.hasError) { عودة < H1 > حدث خطأ. < / H1 > . } العودة this.props.children. }

النص الانكليزي: الشبكي: //blog.logrocket.com/the-new-react-lifecycle-methods-in-plain-approachable-language-61a2105859f3