Svelte / الأساسي: المكونات التفاعلية والملكية / الدرس 6
Effects ودورة الحياة والتزامن مع الخارج
استخدم Effects لتزامن خارجي مسؤول عنه، وأبق الاشتقاق نقياً ونظف عمل المتصفح صحيحاً.
في هذه الصفحة
أهداف الدرس
- اشرح تتبع الاعتماد المتزامن وحد Effect الخاص بالمتصفح.
- افصل مسؤولية التنظيف وترتيب النتائج وإلغاء المصدر.
تزامن Effect شيئاً خارج التصيير النقي
استخدم $effect لتزامن الحالة مع متصفح خارجي كلوحة أو مستمع أو عنصر، وفضل $derived لما تحدده حالة أخرى. يضيف نسخ المشتق مساراً وقد يصنع حلقة. تعمل Effects بالمتصفح لا لحساب بيانات SSR أساسية، ويتبع التتبع القراءة التفاعلية المتزامنة لا قراءة لاحقة برد نداء. راجع التوقيت ولا تعدها سطراً يعمل في كل مكان. يوضح الفرق لماذا قد تنجح واجهة بعد الإماهة بينما كان HTML الأول ناقصاً، إذا نقل المطور اشتقاقاً ضرورياً إلى Effect متوقعاً تشغيلها في الخادم أيضاً.
أعد دالة تنظيف لمورد تملكه
ينشئ الجزء مستمع resize ويعيد إزالته المطابقة. لا يقيس كل تغير تخطيط؛ يسجل عرض المتصفح بعد الإعداد وعند الحدث، ويختار التصميم الحدث أو المراقب المناسب لمطلبه. لم يترجم أو يركب أو يغير حجمه. أبق إرجاع التنظيف متزامناً؛ تعيد callback async وعداً لا الدالة المطلوبة. للعمل غير المتزامن استمرار مسؤول عنه وسياسة إلغاء ونتيجة. يجب أن تتطابق دالة الإزالة وهوية المستمع المضاف، لا إنشاء دالة جديدة تبدو مشابهة ثم توقع إزالة القديمة من سجل المتصفح.
<script>
let width = $state(0);
$effect(() => {
const update = () => { width = window.innerWidth; };
update();
window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
});
</script>
<p>Browser width: {width}</p>يستعمل الجزء Effect للمتصفح وهوية مستمع مطابقة، ولم يشغل مستمعاً أو دورة حياة.
ليس تجاهل النتيجة القديمة إلغاءً لمصدرها
قد ينتهي عمل أقدم بعد الأحدث؛ اربط النتيجة بجيل العملية حتى لا يمحو القديم العرض. ألغ حيث يدعم ونظف ولا تفترض أن الإلغاء يتراجع عن كتابة أو يوقف كل برنامج تشغيل. تقاعد نتائج الهوية القديمة عند تبدلها. اجعل الموعد والإعادة خارج Effect عامة لا تعرف المجال، والكتابة بمدخل متحقق لا Effect تعاد لتغير غير متعلق. يظل قرار تجاهل النتيجة ضابط عرض فقط؛ قد يستمر المصدر في استهلاك مورد بعد أن توقفت الواجهة عن انتظاره، وهذا يحتاج ملاحظة تنظيف مستقلة.
افحص مسؤولية النتيجة الحالية محلياً
يبدأ النموذج جيلاً قديماً وحديثاً ويطبق الحديث أولاً ويرفض القديم المتأخر دون مؤقت أو شبكة. يفحص اختيار نتيجة لا جدولة Effect أو microtasks أوAbortController. يعالج الحقيقي الخطأ القديم والهوية وينظف نهاية العمر. لا تستخدم نوماً عشوائياً لإجبار سباق؛ تحكم في الوعود لترتيب كل إكمال بقصد. يجب أن يبين الاختبار أيضاً هل يسمح عرض قديم مؤقتاً مع حالة انتظار أم يمسح فوراً، لأن قاعدة الجيل لا تختار تجربة المستخدم نيابة عن تصميم الشاشة.
let generation=0;let visible="initial";
const old=++generation;const current=++generation;
function apply(id,value){if(id===generation)visible=value;}
apply(current,"current-result");apply(old,"stale-result");
console.assert(visible==="current-result");لا يستبدل القديم الحالي دون تشغيل Effect أو إلغاء أو مهمة غير متزامنة.
تحقق من التركيب والإعادة والتنظيف بالمترجم المختار
يركز Svelte 5 أعمار التحديث عند Effect ولا تنقل خطاف تحديث قديم حرفياً إلى runes. اتبع الدورة وtick الموثقتين عند حد DOM. يحرر التنظيف المملوك ويتوافق مع الإعادة. اختبر الإعداد وتغير الاعتماد والإزالة بمكون ومتصفح مأذونين. يشغل المقرر الجيل فقط دون Effect أوDOM أوإزالة مستمع، فلا يدعي خلو عنصر أو اشتراك من التسرب. يبقى لفحص إطار فعلي إثبات أن التبعيات التي قرئت هي المقصودة وأن تغييرها لا يترك مستمعاً سابقاً نشطاً أو ينشئ اتصالاً إضافياً بلا مالك.
الأخطاء الشائعة وإصلاحها
تكرر Effect قيمة مشتقة نقية
- لماذا يحدث؟
- اختلط التزامن مع الخارج بالحساب المشتق.
- كيف تصلحه؟
- استخدم تعبيراً مشتقاً نقياً لما تحدده الحالة.
- كيف تتجنب تكراره؟
- اختبر كل تغير اعتماد دون مسارات مزامنة إضافية.
لا تعيد Effect غير متزامنة التنظيف المتوقع
- لماذا يحدث؟
- أعادت callback وعداً بدلاً من دالة تحرير المورد.
- كيف تصلحه؟
- وضح مسؤولية الإعداد والتنظيف وافصل مسؤولية العمل غير المتزامن.
- كيف تتجنب تكراره؟
- تحقق من تنظيف الإعادة والإزالة في اختبار مكون فعلي.
يعيد رد متأخر عرض حساب قديم
- لماذا يحدث؟
- لم تربط النتيجة بالجيل والهوية الحاليين.
- كيف تصلحه؟
- ارفض النتيجة القديمة غير المتوافقة وتقاعد الحالة الخاصة.
- كيف تتجنب تكراره؟
- اختبر تغير الهوية والعمل ما زال معلقاً.
اختبر فهمك
1. هل يثبت نموذج الجيل إلغاء مهمة المصدر؟
اعرض الحل المشروح
لا. يقرر أي نتيجة تصبح ظاهرة وقد يستمر الخارج أو يحفظ. استخدم الإلغاء والتنظيف وتسوية العملية مستقلة، وافحصها بدمج موائم مأذون ولا تعتبر إسقاط النتيجة تراجعاً.
2. لماذا تفضل $derived على Effect تنسخ مجموعاً محسوباً؟
اعرض الحل المشروح
يتحدد المجموع بالمصادر الحالية فيعبر الاشتقاق النقي عن اعتماده مباشرة. تضيف Effect حالة مكررة وتوقيتاً قد ينحرف أو يدور. خصصها للتزامن الخارجي واختبر الحساب مستقلاً عن تتبع المترجم.
أهم ما تعلمته
- تحتاج Effects عملاً خارجياً مملوكاً وتنظيفاً مطابقاً.
- اختيار النتيجة والإلغاء والأثر الدائم شؤون منفصلة.