انتقل إلى محتوى الدرس

Never Read Refs During Render حظر قراءة وتعديل ref بالعرض

تعلّم كيف يحفظ خطاف useRef القيم المتغيرة بين مرات التصيير دون التسبب في إعادة رسم المكون، مع بناء ساعة إيقاف دقيقة ومقارنة المرجع مع useState.
2 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تفرض React قاعدة ذهبية حاسمة عند استخدام المراجع: لا تقرأ أو تعدّل ref.current أثناء تنفيذ جسم التصيير مطلقاً؛ إذ يجب أن تبقى دالة المكون دالة نقية تعتمد مخرجاتها البصرية على props وstate وحدهما.

  • ممنوع أثناء العرض: كتابة ref.current += 1 في جسم المكون أو وضع {ref.current} مباشرة داخل عناصر JSX لأن القيمة لن تتحدث تلقائياً وستختل تحت فحص StrictMode.
  • النطاق الآمن: قراءة وتعديل ref.current داخل معالجات الأحداث مثل onClick وonSubmit.
الصف 2 ملاحظة هامة