شرح صفوف ومحتوى الفقرة
أخيراً، إذا كانت القيمة الأولية للحالة تتطلب حساباً مكلفاً مثل توليد مصفوفة مقاعد كبيرة أو تحليل نص مخزن، فتجنب كتابة useState(buildMatrix()) لأن الأقواس ستشغل الدالة هدراً في كل إعادة تصيير! بدلاً من ذلك مرّر دالة تهيئة كسولة (Lazy Initializer) بصيغة useState(() => buildMatrix()) لتنفذها React مرة واحدة فقط عند التركيب الأول. قارن الآليات في الجدول التالي:
| صيغة الاستدعاء | المثال البرمجي | السلوك الدقيق وقت التشغيل |
|---|---|---|
| استبدال بقيمة اللقطة | setCount(count + 1) | يعتمد على قيمة اللقطة الثابتة للتصيير الحالي |
| دالة التحديث المتسلسلة | setCount(c => c + 1) | تقرأ أحدث قيمة في الطابور وتدعم التحديثات المتتالية |
| تهيئة مبكرة مهدرة | useState(heavyCalc()) | تُشغّل الدالة المكلفة في كل إعادة رسم دون حاجة |
| تهيئة كسولة عالية الكفاءة | useState(() => heavyCalc()) | تُشغّل دالة الحساب مرة وحيدة عند التركيب الأول |
import { useState } from 'react';
function createInitialSeats() {
return ['A1', 'A2', 'B1', 'B2'];
}
function SeatHall() {
const [seats] = useState(createInitialSeats);
return <p>Loaded {seats.length} seats once.</p>;
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تتبعت في هذا الدرس دورة التحفيز والتصيير والاعتماد، وفهمت ثبات لقطة الحالة داخل المعالجات والمؤقتات، واستفدت من التجميع التلقائي للتحديثات وطوابير دوال التحديث والتهيئة الكسولة عالية الكفاءة. الخطوة التالية: انتقل الآن إلى الدرس رقم 20 «تحديث الكائنات في الحالة دون تعديل مباشر» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.