UseState مقابل. useReducer في React: اختيار خطاف إدارة الحالة الصحيح

إذا كنت ترغب في الحصول على وظيفة تطوير الويب ، فستكون لديك فرصة أفضل للنجاح إذا تعلمت مكتبة React JavaScript. React هي واحدة من أكثر المكتبات استخدامًا في الصناعة. وأحد أهم ميزات مكتبة React هو مفهوم الخطافات.

الخطافات هي ببساطة وظائف JavaScript تعزل وتمكنك من إعادة استخدام المنطق في تطبيق React. لإدارة الحالة ، هناك نوعان من الخطافات الرئيسية المتاحة لك - useState هوك و useReducer خطاف.

نظرة عامة على خطاف useState

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

مقدار ثابت [state، setState] = useState (initialStateValue) ؛

في كتلة التعليمات البرمجية أعلاه ، ملف ولاية متغير يحمل البيانات في الذاكرة بين العروض. و setState هي وظيفة "setter" التي تتعامل مع ولاية عامل.

ال useState يُرجع الخطاف مصفوفة تحتوي على عنصرين بالضبط. يأخذ أيضًا قيمة أولية لمتغير الحالة.

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

مقدار ثابت [userAge، setUserAge] = useState (17);

ال setUserAge الوظيفة هي المسؤولة عن تعديل عمر المستخدم المتغير الحكومي.

setUserAge (19);

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

في React ، لا يُنصح بتعديل الحالة مباشرةً (كما هو موضح في كتلة التعليمات البرمجية أدناه) ، لأن التغييرات في المتغيرات غير الحالة لا تستمر بين عمليات عرض المكون.

عمر المستخدم = 19 ؛

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

وظيفةبرنامج(){
يعود (




 </div>
 )
}

في كتلة التعليمات البرمجية أعلاه ، هناك نوعان يُحوّل المكونات ، ولكن كل مكون يتعامل مع حالته الخاصة ولا يعتمد على المكون الآخر ما لم يشترك أحد المكونات في حالته مع المكون الآخر.

يعالج React تحديثات الحالة عن طريق التجميع. هذا يعني أنه عند استدعاء دالة واضع متغير الحالة ، لا يتم تحديث متغير الحالة حتى إعادة التصيير التالية.

نظرة عامة على الاستخدام Reducer Hook

useReducer هو خطاف React يمكن أن يكون مفيدًا عندما تريد التعامل مع حالات متعددة ذات صلة في نفس الوقت. بناء الجملة لـ useReducer يبدو شيئًا مثل هذا:

مقدار ثابت [state، dispatch] = useReducer (المخفض ، الحالة الأولية)

مقارنة ب useState، في useReducer، هناك ولاية متغير و إرسال الوظيفة التي ترسل إجراءات تصل إلى مخفض الوظيفة التي تتعامل مع الحمولات وتقوم بتحديث ملف ولاية.

على سبيل المثال ، لنفترض أنك تقوم بإنشاء تطبيق عداد بسيط بأزرار يمكنها إعادة تعيين العداد أو زيادة قيمة العداد أو تقليل قيمة العداد. استخدام useState سيبدو الرمز الخاص بك كما يلي:

وظيفةعداد(){
مقدار ثابت [count، setCount] = useState (0);
يعود(


 العدد: {count}


 setCount (عدد + 1)}> زيادة العدد </button>
 setCount (0)}> إعادة تعيين </button>
 setCount (عدد - 1)}> إنقاص العدد </button>
 </div>
 </div>
 )
}

التنفيذ أعلاه يعمل بشكل مثالي. ولكن يمكنك أيضًا تحقيق نفس النتائج بمساعدة useReducer خطاف.

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

useReducer يجعل من السهل التعامل مع الحالات ذات الصلة والمنطق المعقد المستند إلى يكتب مرت في المرسل فعل هدف.

على سبيل المثال ، يمكن أن ترسل وظيفة الإرسال ملف فعل كائن يبدو مثل هذا:

{يكتب:"نوع_العمل", الحمولة:ولاية * 2}

قم أولاً باستيراد ملف useReducer hook ، ثم حدد ملف مخفض تعمل مع المعلمات: ولاية والمدمّرون فعل هدف.

يستورد {useReducer} من"تتفاعل";
وظيفةمخفض(الدولة ، {النوع ، الحمولة}) {
لو (يكتب "countIncrease") {
يعود الحمولة.
 } آخرلو (يكتب "countDecrease") {
يعود الحمولة.
 } آخرلو (يكتب "countReset") {
يعود الحمولة.
 } آخر {
يعود ولاية؛
 }
}

بعد تحديد ملف مخفض وظيفة ، يمكنك بناء عداد المكون مع useReducer خطاف.

وظيفةعداد() {
مقدار ثابت [count، dispatch] = useReducer (مخفض ، 0);
يعود (


 العدد: {count}


 إرسال({ يكتب: "countIncrease", الحمولة: العد + 1 })}>
 زيادة العد
 </button>
 إرسال({ يكتب: "countReset", الحمولة: 0 })}>
 إعادة تعيين العد
 </button>
 إرسال({ يكتب: "countDecrease", الحمولة: عدد - 1 })}>
 زيادة العد
 </button>
 </div>
 </div>
 );
}

في مقطع التعليمات البرمجية أعلاه ، يرسل الزر الأول إجراءً من النوع العد يزيد بحمولة العد + 1. هذا الإجراء مسؤول عن زيادة قيمة الجرد.

يرسل الزر الثاني إجراءً من النوع إعادة تعيين بحمولة 0 والتي تعيد تعيين قيمة العد إلى 0.

يرسل الزر الثالث إجراءً من النوع العد التناقص بحمولة العد - 1 مما يقلل من قيمة العد بمقدار 1.

الاختيار بين الخطاف useState و useReducer

الآن ، بعد أن فهمت كيفية الاستخدام useState و useReducer الخطافات ، من المهم معرفة وقت استخدام الخطاف الصحيح.

إذا كانت دولتك لا تتطلب منطقًا معقدًا ، فمن الواضح أن استخدام useReducer يمكن أن يكون مبالغة.

إذا كانت دولتك أي شيء إلا بدائل JavaScript مثل الأرقام والسلاسل والقيم المنطقية، يجب عليك استخدام useState خطاف. وإذا كان نوع الحالة كائنًا أو مصفوفة ، فعليك التفكير في استخدام useReducer بدلاً من.

مع زيادة تعقيد تطبيقك ، يصبح من الصعب التعامل مع الحالة باستخدام ملف useState و useReducer خطافات.

هذا هو الوقت يمكنك استخدام مكتبات خارجية مثل Reduxوجوتاي وزوستند. تسهل هذه المكتبات التعامل مع تغييرات الحالة عبر مكونات متعددة.

جعل إدارة الدولة أسهل مع مكتبات JavaScript

مكتبات مثل React و Vue و Svelte لها طرقها الخاصة للتعامل مع الحالة. من المؤكد أن التعامل مع إدارة الحالة بمفردك باستخدام Vanilla JavaScript أمر يمكنك تجربته ، ولكن من الأسهل والأكثر ملاءمة استخدام مكتبة JavaScript تم اختبارها في المعركة.

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