عندما بدأت ReactJS، استمتعت حقًا بالخطوات الأولى والمكونات والدعائم والعديد من الأشياء الممتعة في react. إحدى تلك الميزات كانت useEffect ؛ كان الأمر ممتعًا ولكنه معقد بالنسبة لي بينما كنت أجاهد لتعلمه.
الآن أريد أن أشارك نموذجي الذهني في ورقة الغش الصغيرة أو Cheatsheet هذه لمساعدتك على تعلم استخدام التأثير بشكل أفضل أو امتلاك نموذج أفضل.

فلسفة useEffect

فلسفة useEffect

useEffect ليس خطافًا لدورة الحياة (EpicReact.dev). إنها آلية لمزامنة الآثار الجانبية (fetch ، setTimeout ، …) مع حالة تطبيقك.

الهدف الرئيسي ليس استخدام useEffect لدورة حياة المكون ولكن استخدامه للقيام بالأشياء عند تغيير الحالة (re-renders).

useEffect(() => {
  // A: run whenever the deps changes
  return {
	  // B: Optional, runs before 1, we call this the clean-up function
  }
}, deps); // deps is Optional too

خطوات تشغيل useEffect

1: تشغيل A

2: انتظر تغييرات الحالة الجديدة (component re-renders)

3: إذا تغيرت الأقسام
قم بتشغيل B لتنظيف الآثار الجانبية للعرض السابق
ثم انتقل إلى 2

التبعيات في useEffect

  • No dependency (الاستقلال-لا تبعية): وظيفة الآثار الجانبية (A) ستعمل على كل تغيير حالة (re-render).
useEffect(() => {
  // I depend on everything, I'll run on every re-render
}); 
  • Empty Array (مصفوفة فارغة): لا يوجد شيء للاستماع إلى تغييراته، لذا ستعمل وظيفة التأثير الجانبي مرة واحدة فقط عند تهيئة الحالة (first render).
useEffect(() => {
  // I depend on nothing, I'll run just one time
}, []);
  • Non-Empty Array (مصفوفة غير فارغة): تعمل وظيفة التأثير الجانبي على كل تغييرات التبعية (على الأقل واحدة من التبعيات).
useEffect(() => {
  // I depend on state1, state2 and prop1
  // I'll run on every change of these dependencies
}, [state1, state2, prop1]);

كل عرض له آثاره الخاصة!

أنا حقًا أحب عنوان “كل عرض له تأثيرات خاصة به”؛ أعتقد أن جميع الخطافات تقريبًا تعتمد على هذا العنوان. يجب أن نلاحظ أن كل تصيير (render) يتجسد له وظيفة وقيمة الخاصة. الشيء نفسه ينطبق على وظيفة الآثار الجانبية.

افحص هذا:

useEffect(() => {
  console.log(count)
}, [count]);

لنقم ببعض التغييرات الفرضية في الحالة ونرى ما يحدث لوظيفة الآثار الجانبية.

// in the first render, `count` is 0
// The side-effect function is going to be like this
() => {
  console.log(0)
}
// assume we change `count` to 1 (setCount(1)), next render is like that
() => {
  console.log(1)
}
// and so on...

هذه هي الطريقة التي يعمل بها useEffect حول التبعيات.

المصدر: Bugged🐞

محمدباقر عبيات

The one Who loves solving stuff and writing about them.

منشور ذات صلة
تطبيق AngularJS 12 Minutes

كيفية تدويل (internationalize) تطبيق AngularJS

جاسم ناظري

يمكن أن يشكل جعل تطبيق AngularJS متعدد اللغات الخاص بك بعض التحديات المثيرة للاهتمام ولكن بعض الأساليب يمكن أن تجعل من السهل التغلب على معظم هذه التحديات.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة