كيفية فهم طرق دورة حياة المكون في ReactJS

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

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

توجد طرق مختلفة لدورة الحياة توفرها React في مراحل مختلفة من عمر المكون. تقوم React تلقائيًا باستدعاء الطريقة المسؤولة وفقًا للمرحلة التي يوجد فيها المكون. تمنحنا هذه الأساليب تحكمًا أفضل في مكوننا ويمكننا معالجتها باستخدام هذه الأساليب.

في الوقت الحالي ، نعرف ما هي طرق دورة الحياة ولماذا هي مهمة. إذن ما هي هذه الأساليب المختلفة؟ دعونا نلقي نظرة عليهم.

طرق دورة الحياة

يتم تصنيف دورة حياة المكون على نطاق واسع إلى أربعة أجزاء:

  • التهيئة
  • تصاعد
  • تحديث و
  • غير متصاعد .

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

التهيئة

هذه هي المرحلة التي سيبدأ فيها المكون رحلته من خلال إعداد الحالة (انظر أدناه) والدعائم. يتم ذلك عادةً داخل طريقة المُنشئ (انظر أدناه لفهم مرحلة التهيئة بشكل أفضل).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

تصاعد

الاسم لا يحتاج إلى شرح. التركيب هو المرحلة التي يتم فيها تثبيت مكون React على DOM (على سبيل المثال ، يتم إنشاؤه وإدراجه في DOM).

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

1. componentWillMount ()

تُستدعى هذه الطريقة قبل تثبيت المكوّن على DOM أو قبل استدعاء طريقة العرض. بعد هذه الطريقة ، يتم تثبيت المكون.

ملاحظة: يجب عدم إجراء مكالمات API أو أي تغييرات في البيانات باستخدام this.setstate في هذه الطريقة لأنه يتم استدعاؤها قبل طريقة العرض. لذلك ، لا يمكن فعل أي شيء مع DOM (أي تحديث البيانات باستجابة API) لأنه لم يتم تحميله. وبالتالي ، لا يمكننا تحديث الحالة باستجابة واجهة برمجة التطبيقات.

2-componentDidMount ()

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

ألق نظرة لفهم طرق التركيب هذه:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

التحديث

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

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

  1. shouldComponentUpdate ()

تحدد هذه الطريقة ما إذا كان يجب تحديث المكون أم لا. بشكل افتراضي ، يعود صحيحًا. ولكن في مرحلة ما ، إذا كنت تريد إعادة تصيير المكون بشرط ما ، فإن طريقة shouldComponentUpdate هي المكان المناسب.

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

2. componentWillUpdate ()

مثل الأساليب الأخرى ، فإن اسمها واضح بذاته أيضًا. يتم استدعاؤه قبل إجراء إعادة عرض المكون. يتم استدعاؤه مرة واحدة بعد طريقة " shouldComponentUpdate ". إذا كنت تريد إجراء بعض العمليات الحسابية قبل إعادة عرض المكون وبعد تحديث الحالة والخاصية ، فهذا هو أفضل مكان للقيام بذلك. مثل طريقة shouldComponentUpdate ، تتلقى أيضًا وسيطات مثل nextProps و nextState.

3. ComponentDidUpdate ()

This method is called just after the re-rendering of the component. After the new (updated) component gets updated on the DOM, the ‘componentDidUpdate’ method is executed. This method receives arguments like prevProps and prevState.

Have a look to understand the updating methods better:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Unmounting

This is the last phase in the component’s lifecycle. As the name clearly suggests, the component gets unmounted from the DOM in this phase. The method that is available in this phase is:

1. componentWillUnmount()

This method is called before the unmounting of the component takes place. Before the removal of the component from the DOM, ‘componentWillUnMount’ executes. This method denotes the end of the component’s lifecycle.

Here is a flowchart representation of lifecycle methods:

هذا كل ما يتعلق بهذا الجزء المهم من عالم React - طرق دورة الحياة. أتمنى أن تكون قد استمتعت بقراءته.

شكر!