$state: التفاعلية الدقيقة
صرّح بالحالة التفاعلية باستخدام rune $state لإجراء تحديثات دقيقة لعناصر DOM.
$state: التفاعلية الدقيقة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
تعريف الحالة
استخدم $state(initial) لتعريف متغير تفاعلي.
let count = $state(0);إعادة الإسناد بشكل عادي
حدّث القيمة باستخدام إسناد عادي. وسيعيد Svelte عرض واجهة المستخدم التابعة لها.
count = count + 1;الكائنات والمصفوفات
ينشئ $state مع الكائنات والمصفوفات وكلاء عميقين؛ وتصبح التغييرات تفاعلية.
let user = $state({ name: "Ada" });
user.name = "Bea"; // triggers updateلا مزيد من items = items
لم تعد بحاجة إلى إعادة الإسناد لتحفيز التحديثات، إذ تلتقط الوكلاء التغييرات.
التحديثات الدقيقة
يعاد عرض الأجزاء من DOM التي تستخدم الخاصية المتغيرة فقط.
القيم التي تعيدها الدوال
يمكنك إعادة كائنات مدعومة بـ$state من الدوال لإنشاء أجزاء حالة قابلة لإعادة الاستخدام.
function counter() {
let n = $state(0);
return {
get value() { return n; },
increment() { n++; }
};
}الاستخدام في المكتبات
يعمل $state في ملفات .ts و.js أيضًا إذا استخدمت امتداد .svelte.ts.
من دون تتبع
استخدم untrack() لقراءة قيمة حالة من دون تسجيل تبعية.
حالة خام
بالنسبة إلى البيانات الضخمة غير التفاعلية، استخدم $state.raw لتجاوز الوكيل.
لقطة ثابتة
استخدم $state.snapshot(obj) للحصول على نسخة عادية غير مدعومة بوكيل.
مقارنةً بـ let
يُعد $state البديل الحديث لـlet العادي ذي التفاعلية الضمنية.
اختبار سريع
ماذا يحدث عند تغيير كائن $state؟
مراجعة
ينشئ $state متغيرات تفاعلية دقيقة، بما في ذلك الكائنات والمصفوفات المدعومة بوكلاء عميقين.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «$state: التفاعلية الدقيقة» مجاني؟
نعم — نص درس «$state: التفاعلية الدقيقة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «$state: التفاعلية الدقيقة»؟
صرّح بالحالة التفاعلية باستخدام rune $state لإجراء تحديثات دقيقة لعناصر DOM. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «$state: التفاعلية الدقيقة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- لماذا Runes: ما بعد سحر المصرّف
- $state: التفاعلية الدقيقة
- $derived: القيم المحسوبة التصريحية
- $effect: التأثيرات الجانبية