Svelte / الأساسي: المكونات التفاعلية والملكية / الدرس 2
الحالة والقيم المشتقة والهوية التفاعلية
استخدم حالة صريحة واشتقاقاً نقياً وميز هوية الوكيل التفاعلي من لقطة JavaScript العادية.
في هذه الصفحة
أهداف الدرس
- اشرح $state و$derived في نمط runes من Svelte 5.
- تجنب اللقطات المنسوخة وتكرار الحالة المشتقة بواسطة Effects.
عرف المصدر واحسب ما يشتق منه
تعلم $state الحالة و$derived ما يحسب منها في runes. يشتق العداد ضعفه دون عداد ثان يزامن يدوياً. يجب أن يخلو الاشتقاق من الأثر؛ تربك كتابة مصدر أو تغيير غير متعلق عقد التنفيذ. rune صياغة مترجمة، فلا يختبر حساب Node مشابه التفاعل. افصل حساب المجال ثم تحقق من تتبع اعتماد المكون المترجم. يتيح هذا الفصل معرفة هل قيمة خاطئة نتجت من معادلة المجال نفسها أو من قراءة لم تعد داخل نطاق تفاعلي، بدلاً من إضافة Effect كلما بدا العرض قديماً.
اقرأ الحالة واكتبها مباشرة داخل المكون المترجم
يستخدم المكون $state عددية ويشتق double، ويزيد الحدث المصدر لا القيمتين مستقلتين. وفق الشيفرة تكون البداية صفراً وصفراً وبعد نقرة واحداً واثنين، لكن لم يشغل مترجم أو DOM أو حدث. تقرأ القيمة كمتغير؛ لا تضف .value مخترعة. وتبقى قواعد المجال مستقلة فقد تكون كمية تفاعلية خارج المدى. لا يثبت تحديث الشاشة أن الخادم سيقبل الرقم أو أن حفظه دائم؛ هو سلوك واجهة يستلزم تحققاً عند انتقاله لعملية عمل.
<script>
let count = $state(0);
let double = $derived(count * 2);
</script>
<button onclick={() => count += 1}>Count {count}</button>
<p>Double {double}</p>التسلسل مستنتج من الجزء لا مقاس؛ لم يترجم أو ينقر.
اعرف التفاعلي واللقطة المنفصلة
قد تنشئ $state وكلاء عميقة للكائن والمصفوفة العاديين وفق القواعد، ولا تجعل كل فئة أو خارج تفاعلياً. قد يلتقط التفكيك أو تمرير بدائي القيمة الحالية لا علاقة حية. اختر getter أو واجهة صريحة للقراءة الحالية. تختلف raw وsnapshot فلا تخلطها بافتراض التغيير العميق. راجع الملكية المتداخلة؛ قد يشترك غلافان جديدان بكائن متغير. يوضح ذلك لماذا يفشل نقل منطق إلى مساعد إذا مررت إليه العدد مرة ثم توقعت أن معرفه الداخلي سيتابع المصدر المتغير بلا أي مرجع أو دالة قراءة.
اختبر حساب المجال دون ادعاء سلوك الوكيل
تجمع الدالة مدد المقررات المنشورة وتعيد صفراً للفارغ. لا تراقب وكيلاً أو تتبع اعتماداً أو تشترك. تثبت قاعدة قابلة للتكرار بحد صادق. قد يستعمل المكون حساباً نقياً داخل مشتق ويحتاج اختبار تغيير القائمة واستبدالها منفصلاً. تحقق من الوحدة وعدم السالب عند المصدر ولا تسمح لسلسلة عشوائية بالجمع. لا تصلح التفاعلية بيانات معيبة؛ قد تعرض قيمة خاطئة بسرعة وبانتظام، لذلك لا ينبغي أن يقتصر الاختبار على تغير DOM بعد نقرة دون فحص المعنى الحسابي الناتج.
function minutes(rows) {return rows.filter(r=>r.published).reduce((sum,r)=>sum+r.minutes,0);}
console.assert(minutes([{published:true,minutes:15},{published:false,minutes:40},{published:true,minutes:5}])===20);
console.assert(minutes([])===0);مجموع المنشور عشرون دقيقة والفارغ صفر دون اختبار تتبع اعتماد Svelte.
افصل معنى الاشتقاق عن العمل غير المتزامن
فضل المشتق لما تحدده الحالة الحالية وEffects لتزامن خارجي فعلي لا نسخ متغير لآخر افتراضياً. يحتاج المصدر غير المتزامن مسؤولية طلب وخطأ ومنع نتيجة قديمة. ليست القيمة المشتقة نسخة قاعدة أو إقرار كتابة. عند النقل إلى .svelte.js أو.ts احفظ سياق الترجمة وكيف يقرأ المستهلك الحالي. يشغل المقرر الحساب فقط دون runes أو وكيل أو جدولة أو وحدة منقولة. يحتاج تحقق الإطار معرفة هل تغير المدخل بالمكان الذي تتبعه الشيفرة المترجمة، لا مجرد إعادة تشغيل الدالة الحسابية يدوياً بعد كل تعديل.
الأخطاء الشائعة وإصلاحها
تبقى قيمة مفككة من كائن حالة عادي قديمة
- لماذا يحدث؟
- اختلطت لقطة بدائية حالية بعلاقة تفاعلية مستمرة.
- كيف تصلحه؟
- استخدم نمط الوصول الحالي الموثق أو getter صريحة.
- كيف تتجنب تكراره؟
- اختبر التغيير المتداخل واستبدال المدخل داخل المكون المترجم.
تنحرف قيمتان تزامنان يدوياً
- لماذا يحدث؟
- كرر المعنى المشتق كحالة مستقلة تحتاج مزامنة.
- كيف تصلحه؟
- احفظ مصدراً واحداً واحسب التابع باشتقاق نقي.
- كيف تتجنب تكراره؟
- اختبر كل طرق تغيير المصدر لا زراً واحداً.
يفترض أن كل كائن عميق التفاعل
- لماذا يحدث؟
- عممت قواعد الوكيل الموثقة على قيم عشوائية.
- كيف تصلحه؟
- راجع نوع الكائن وواجهة الحالة المختارة فعلياً.
- كيف تتجنب تكراره؟
- افصل عينات الكائن العادي والفئة والحالة raw.
اختبر فهمك
1. هل يثبت اختبار minutes أن تغيير قائمة Svelte يحدث الواجهة؟
اعرض الحل المشروح
لا. يثبت قاعدة حساب وتصفية لمصفوفات مقدمة، ولا يترجم rune أو يتتبع اعتماداً. احتفظ بالدليل ثم اختبر تغيير المصدر واستبداله ونتيجة العرض في دمج مترجم ومتصفح معزول مأذون.
2. لماذا يجب ألا يكتب تعبير مشتق إلى خادم؟
اعرض الحل المشروح
غرضه حساب قيمة وقد يتكرر وفق التنفيذ التفاعلي لا قصد مستخدم فريد مؤكد، فتتكرر الكتابة أو تفاجئ. اجعله نقياً واستعمل فعلاً مفوضاً متحققاً بإعادة صريحة للتغيير الدائم.
أهم ما تعلمته
- توضح المصادر الصريحة والاشتقاقات النقية المعنى التفاعلي.
- اللقطة والوكيل وصحة المجال شؤون مختلفة.