دورات حياة مكونات ReactJS بكل سهولة
يمر كل مكون في React بدورة حياة الأحداث. يمكنك التفكير في المرور بدورة الولادة والنمو والموت كما في الصورة أدناه.
المراحل هي
- التهيئة - بدء رحلة المكون الخاص بك
- تصاعد - ولادة المكون الخاص بك
- تحديث - نمو المكون الخاص بك
- Unmount - موت المكون الخاص بك
In English
- Initialization — Starting the journey of your component
- Mounting — Birth of your component
- Update — Growth of your component
- Unmount — Death of your component
1. التهيئة
هذه هي المرحلة التي سيبدأ فيها المكون رحلته. يجب على المطور تحديد الخاصيات والحالة الأولية للمكون. يتم ذلك عادة داخل طريقة الباني.
In Enlish
1. Initialization
This is the phase in which the component is going to start its journey. The developer has to define the props and initial state of the component. This is
usually done inside the constructor method.
2. التركيب
التثبيت هو مرحلة دورة حياة المكون عند اكتمال تهيئة المكون وتركيب مكون React على DOM (أي يتم إنشاؤه وإدراجه في DOM) ويتم تقديمه لأول مرة على صفحة الويب. لها وظيفتان محددتان مسبقًا: -
- componentWillMount (): كما يوحي الاسم بوضوح ، يتم استدعاء هذه الطريقة قبل تثبيت مكون على DOM مباشرة ، أي يتم استدعاء هذه الوظيفة مرة واحدة قبل تنفيذ وظيفة التقديم () لأول مرة. بعد هذه الطريقة ، يتم تثبيت المكون.
- componentDidMount (): على غرار الطريقة السابقة ، تُستدعى هذه الطريقة بعد تثبيت المكوِّن على DOM ومرة واحدة فقط في دورة الحياة. قبل تنفيذ هذه الطريقة ، يُطلق على طريقة العرض (أي يمكننا الوصول إلى DOM). يمكننا إجراء مكالمات API وتحديث الحالة باستجابة API.
In English
2. Mounting
Mounting is the phase of the component lifecycle when the initialization of the component is completed and the React component mounts on the DOM (i.e., is created and inserted into the DOM) and rendered for the first time
on the webpage. It has 2 predefined functions:-
componentWillMount(): As the name clearly suggests, This method is invoked just before a component mounts on the DOM, i.e. this function gets invoked once before the render() function is executed for the first time. After this method, the component gets mounted.
componentDidMount(): Similarly to the previous one this method is called after the component gets mounted on the DOM and only once in a lifecycle. Before the execution of this method, the render method is called (i.e., we can access the DOM). We can make API calls and update the state with the API response.
componentDidMount(): Similarly to the previous one this method is called after the component gets mounted on the DOM and only once in a lifecycle. Before the execution of this method, the render method is called (i.e., we can access the DOM). We can make API calls and update the state with the API response.
3. التحديث
التحديث هو المرحلة التي يتم فيها تحديث حالات العنصر ودعائمه متبوعة ببعض أحداث المستخدم مثل النقر والضغط على مفتاح على لوحة المفاتيح وما إلى ذلك. وهذا هو المكان الذي تتغير فيه حالة المكون ، وبالتالي تتم إعادة العرض.
الطرق المتوفرة في هذه المرحلة هي:
componentWillRecieveProps () الوظيفة: يتم استدعاؤها بمجرد تحديث الخاصيات قبل استدعاء تصيير آخر. في الأساس ، يتم استدعاؤه قبل أن يتلقى المكون المركب دعائم جديدة. إذا كنت بحاجة إلى تحديث الحالة استجابةً لتغييرات الخاصية (على سبيل المثال ، لإعادة تعيينها) ، فيمكنك مقارنة this.props و nextProps وإجراء انتقالات الحالة باستخدام this.setState () في هذه الطريقة.
shouldComponentUpdate: سيحدد هذا ما إذا كان سيتم تحديث المكون أم لا. تفي الوظيفة بالمتطلبات من خلال السماح لـ React بمعرفة ما إذا كان ناتج المكون سيتأثر بكل حالة أو تحديث خاص بالدعم أم لا. يتم استدعاؤه قبل عرض مكون تم تركيبه بالفعل عند تلقي دعائم أو حالات جديدة. إذا تم إرجاعه بشكل خاطئ ، فلن يتم تنفيذ خطوات التقديم التالية. لا يُستدعى هذا الأسلوب للتصيير الأولي أو عند استخدام forceUpdate (). تأخذ الدالة الدعائم الجديدة والحالة الجديدة كوسائط وترجع ما إذا كان يجب إعادة التصيير أم لا عن طريق إرجاع قيمة صحيحة أو خاطئة. بشكل افتراضي ، يتم تعيينه على صحيح. هذه الطريقة موجودة فقط كتحسين للأداء.
componentWillUpdate: يُستدعى قبل التصيير مباشرةً ، أي يتم استدعاء الوظيفة مرة واحدة قبل تنفيذ وظيفة العرض () بعد تحديث الحالة أو الدعائم.
componentDidUpdate: يُستدعى بعد العرض مباشرةً ، ويُعد هذا أيضًا مكانًا جيدًا لتنفيذ طلبات الشبكة طالما أنك تقارن الخاصيات الحالية بالخصائص السابقة (على سبيل المثال ، قد لا يكون طلب الشبكة ضروريًا إذا لم يتم تغيير الخاصيات). componentDidUpdate () سوف لا يتم استدعاءه إذا قام shouldComponentUpdate () بإرجاع القيمة false.
In English
3. Updating
Updation is the phase where the states and props of a component are updated followed by some user events such as clicking, pressing a key on a keyboard etc. This is where a component’s state changes and hence, re-rendering takes place.
The methods that are available in this phase are
componentWillRecieveProps() Function: It is invoked as soon as the props are updated before another render is called. Basically, it is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.
shouldComponentUpdate: This will determine if the component will be updated or not. The Function fulfills the requirement by letting React know whether the component’s output will be affected by every state or props update or not. It is invoked before rendering an already mounted component when new props or states are being received. If returned false then the subsequent steps of rendering will not be carried out. This method is not called for the initial render or when forceUpdate() is used. The Function takes the new Props and new State as the arguments and returns whether to re-render or not by returning a true or false value. By default, it is set to true. This method only exists as a performance optimization.
componentWillUpdate: is called just before rendering i.e. the function gets invoked once before the render() function is executed after the updation of State or Props.
componentDidUpdate: is called just after rendering.This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.
shouldComponentUpdate: This will determine if the component will be updated or not. The Function fulfills the requirement by letting React know whether the component’s output will be affected by every state or props update or not. It is invoked before rendering an already mounted component when new props or states are being received. If returned false then the subsequent steps of rendering will not be carried out. This method is not called for the initial render or when forceUpdate() is used. The Function takes the new Props and new State as the arguments and returns whether to re-render or not by returning a true or false value. By default, it is set to true. This method only exists as a performance optimization.
componentWillUpdate: is called just before rendering i.e. the function gets invoked once before the render() function is executed after the updation of State or Props.
componentDidUpdate: is called just after rendering.This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.
4. فك التركيب
هذه هي المرحلة الأخيرة من دورة حياة المكون وهي مرحلة إلغاء تثبيت المكون من DOM. الوظيفة التالية هي العضو الوحيد في هذه المرحلة.
componentWillUnmount (): يتم استدعاء هذه الوظيفة قبل إلغاء تثبيت المكون أخيرًا وإتلافه من DOM.
يجب ألا تستدعي setState () في componentWillUnmount () لأن المكوّن لن يُعاد تصييره أبدًا. حالما يتم فك نسخة المكون ، لن يتم تحميلها مرة أخرى.
قم بإجراء أي تنظيف ضروري في هذه الطريقة ، مثل إبطال المؤقتات أو إلغاء طلبات الشبكة أو تنظيف أي اشتراكات تم إنشاؤها في componentDidMount ()
شكرا للقراءة. ترميز رد فعل سعيد! لك
اقرا المزيد
مقارنة بين React و Vue.js وAngularJS
In English
4. Unmounting
This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM. The following function is the sole member of this phase.
componentWillUnmount(): This function is invoked before the component is finally unmounted and destroyed from the DOM.
You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted agai
for reading. Hppy React coding!…
اذا اعجبك المقال شاركه مع اصدقائك المهتمين شكرا جزيلا!
تعليقات
إرسال تعليق