77 lines
3.7 KiB
Markdown
77 lines
3.7 KiB
Markdown
|
---
|
|||
|
|
title: Life Cycle Methods Of A Component
|
|||
|
|
localeTitle: طرق دورة الحياة للمكون
|
|||
|
|
---
## طرق دورة الحياة للمكون
|
|||
|
|
|
|||
|
|
عندما نبدأ العمل مع المكونات ، نحتاج إلى تنفيذ العديد من الإجراءات لتحديث حالة أو تنفيذ بعض الإجراءات عندما يتغير شيء في هذا المكون. في هذا السيناريو ، تأتي طرق دورة حياة أحد المكونات في متناول يدك! لذلك دعونا الغوص في هذه المقالة.
|
|||
|
|
|
|||
|
|
بشكل عام ، يمكننا تقسيم أساليب دورة الحياة إلى **3** فئات.
|
|||
|
|
|
|||
|
|
1. متزايد
|
|||
|
|
2. تحديث
|
|||
|
|
3. غير متزايد
|
|||
|
|
|
|||
|
|
بما أن أساليب دورة الحياة تفسيرية ، فأنا سأذكر أسماء الطريقة فقط. لا تتردد في المساهمة في هذه المقالة ، إذا لزم الأمر.
|
|||
|
|
|
|||
|
|
## تصاعد:
|
|||
|
|
|
|||
|
|
ا. `constructor()`
|
|||
|
|
|
|||
|
|
ب. `componentWillMount()`
|
|||
|
|
|
|||
|
|
ج. `render()`
|
|||
|
|
|
|||
|
|
د. `componentDidMount()`
|
|||
|
|
|
|||
|
|
## تحديث:
|
|||
|
|
|
|||
|
|
ا. `componentWillRecieveProps()`
|
|||
|
|
|
|||
|
|
ب. `shouldComponentUpdate()`
|
|||
|
|
|
|||
|
|
ج. `componentWillUpdate()`
|
|||
|
|
|
|||
|
|
د. `render()`
|
|||
|
|
|
|||
|
|
ه. `componentDidUpdate()`
|
|||
|
|
|
|||
|
|
## غير متزايد:
|
|||
|
|
|
|||
|
|
ا. `componentWillUnmount()`
|
|||
|
|
|
|||
|
|
## بعض الحقائق المثيرة للاهتمام لاحظت:
|
|||
|
|
|
|||
|
|
* سيتم استدعاء `constructor` و `componentWillMount` و `componentDidMount` و `componentWillUnmount` مرة واحدة فقط خلال دورة حياة المكون.
|
|||
|
|
* لن يتم تنفيذ `componentWillUpdate` ، و `componentDidUpdate` إلا إذا كان `shouldComponentUpdate` إرجاع `shouldComponentUpdate` فقط.
|
|||
|
|
* سيتم استدعاء `componentWillUnmount()` فقط قبل إلغاء تثبيت أي مكون ، ومن ثم يمكن استخدامه لتحرير الذاكرة المستخدمة ، وإغلاق أي اتصالات إلى DB ، إلخ.
|
|||
|
|
|
|||
|
|
يمكن تعلم الكثير من الأشياء عن طريق الغوص في الترميز. حتى الحصول على يديك القذرة بواسطة الترميز.
|
|||
|
|
|
|||
|
|
ملحوظة:
|
|||
|
|
|
|||
|
|
> "سيتم تمكين تحذيرات الإزالة مع إصدار 16.x مستقبلي ، **ولكن** ستستمر دورات العمر للتشغيل **حتى الإصدار 17.** " 1
|
|||
|
|
>
|
|||
|
|
> "حتى في الإصدار 17 ، سيظل من الممكن استخدامها ، ولكنها ستكون مستعارة ببادئة" UNSAFE\_ "للإشارة إلى أنها قد تسبب مشاكل. كما أعدنا [نصًا تلقائيًا لإعادة تسميته](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) في الشفرة الحالية." 1
|
|||
|
|
|
|||
|
|
وبعبارة أخرى ، ستظل أساليب دورة الحياة السابقة هذه متوفرة على النحو التالي:
|
|||
|
|
|
|||
|
|
* `UNSAFE_componentWillMount`
|
|||
|
|
* `UNSAFE_componentWillReceiveProps`
|
|||
|
|
* `UNSAFE_componentWillUpdate`
|
|||
|
|
|
|||
|
|
## طرق دورة الحياة الجديدة
|
|||
|
|
|
|||
|
|
سيتم تقديم أساليب دورة الحياة الجديدة في React 17
|
|||
|
|
|
|||
|
|
* `getDerivedStateFromProps` بديلاً أكثر أمانًا `componentWillReceiveProps` .
|
|||
|
|
* سيتم إضافة `getSnapshotBeforeUpdate` لدعم قراءة الخصائص بأمان من التحديثات DOM تتم
|
|||
|
|
|
|||
|
|
يمكن تعلم الكثير من الأشياء عن طريق الغوص في الترميز. حتى الحصول على يديك القذرة بواسطة الترميز.
|
|||
|
|
|
|||
|
|
### مصادر
|
|||
|
|
|
|||
|
|
1. [فون ، برايان. "React v16.3.0: New lifecycles and context API". 29 مارس 2018. تم الوصول إليها: 22 مايو 2018.](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)
|
|||
|
|
|
|||
|
|
### مصادر
|
|||
|
|
|
|||
|
|
[تحديث على التقديم المتزامن](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|