React: لماذا يتمثل السلوك الافتراضي لـ useEffect في التشغيل في كل تصيير؟

تم إنشاؤها على ٢٦ نوفمبر ٢٠١٩  ·  3تعليقات  ·  مصدر: facebook/react

هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟
سؤال حول تصميم واجهة برمجة التطبيقات حول useEffect

ما هو السلوك الحالي؟
حاليًا يتم تشغيل useEffect في كل تصيير. يمكن أن يكون هذا السلوك الافتراضي خطيرًا في مواقف مثل التعامل مع طلبات HTTP عندما تنسى تمرير الوسيطة الثانية. يبدو أن هذا خطأ شائع خاصة للقادمين الجدد مثلي. لا أستطيع التفكير في العديد من الأنماط (أي منها) حيث تريد تشغيل useEffect في كل تصيير. ما هو السبب وراء عدم التخلف عن الترشح مرة واحدة؟

Question

ال 3 كومينتر

حسب تصميم API:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

سيتم تشغيل useEffect فقط عندما تتغير قائمة التبعيات ، ويعني المصفوفة الفارغة [] عدم وجود تبعية (أي سيتم تشغيلها مرة واحدة فقط). من المنطقي بالنسبة لي أن قائمة التبعيات غير المحددة تعني تشغيل الوظيفة ملفوفة بواسطة useEffect كل تصيير.

لا يمكنني التفكير في العديد من الأنماط (أي) حيث تريد تشغيل useEffect في كل تصيير. ما هو السبب وراء عدم التخلف عن الترشح مرة واحدة؟

لنفترض أنك جديد جدًا على React ، وتريد أن تفعل شيئًا عندما يتغير متغير useState (على سبيل المثال ، انشر القيمة الجديدة على الخادم).

  • مع السلوك الحالي ، يمكنك نشر نفس القيمة عدة مرات ، لكنك لن تفوتك مطلقًا نشر قيمة متغيرة.
  • مع السلوك الذي تقترحه ، سيتم نشر القيمة الأولية / التغيير الأول فقط ، ولن تؤدي التغييرات الإضافية إلى رد الاتصال useEffect .

أعتقد أن الغرض من قائمة التبعيات هو أن تكون أكثر من تحسين الأداء / المساعدة في تبسيط الكود.

تسمح لك واجهة برمجة التطبيقات الحالية بالاختيار بين السلوكيات التالية:

  • قم بتشغيل التأثير في كل مرة. هذا يحاكي سلوك الفئة القديمة componentDidMount + componentDidUpdate .
  • قم بتشغيل التأثير مرة واحدة فقط. هذا يحاكي سلوك componentDidMount القديم.
  • قم بتشغيل التأثير فقط عندما تتغير التبعيات. يعد هذا نوعًا جديدًا ، على الرغم من أنه يمكنك (وغالبًا ما تفعل) تنفيذ الشيء نفسه بواسطة المكون this.props و prevProps في مكون الفئة API.

غالبًا ما يكون السلوك "الافتراضي" الذي تصفه (عندما لا تحدد التبعيات بشكل صريح) هو الأكثر أمانًا لأنه يمنع استخدام القيم القديمة في عمليات الإغلاق .

في المستقبل ، نأمل أن نوفر نوعًا من المترجم للمساعدة في أتمتة الكثير من هذا بعيدًا. في غضون ذلك ، نقدم مكوّنًا إضافيًا رسميًا من ESLint للمساعدة في تسهيل الأمر قليلاً. 😄

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات