Svelte / الأساسي: المكونات التفاعلية والملكية / الدرس 3
الخصائص وردود النداء وملكية الحالة
حدد مالك القيمة واستعمل رد نداء صريحاً أو ربطاً مقصوداً بدلاً من تغيير حالة مكون آخر عرضياً.
في هذه الصفحة
أهداف الدرس
- اشرح $props وعقد رد النداء مع القيم الحالية.
- ميز تفعيل الربط من إذن تغيير كائنات الأب العشوائية.
تحمل الخصائص واجهة لا حقوق تغيير مطلقة
يمرر الأب الخصائص كمدخل وقدرات رد نداء، وتعرف $props الحد في runes. يعرض الابن الحالي ويطلب تغييراً دون تملك الكائن كله. قد يسبب تغيير وكيل من مكون آخر تحذير ملكية وحالة مفاجئة؛ هو إشارة تصميم لا يسكت بجعل كل خاصية قابلة للربط. اختر مالكاً وحدد الأفعال المسموح طلبها. لا ينشئ حد المكون تفويض خادم. عندما يضغط المستخدم زر التحرير يرسل الابن قصداً يعالجه المالك، ولا يحق له تجاوز تحقق المجال لأن قيمة وصلته في خاصية قابلة للقراءة.
اطلب قصداً عبر خاصية رد نداء صريحة
يتلقى الابن عنواناً وonrename ويمرر النص المقترح عند النقر. الاسم API تطبيق لا أمن مضمن، ويملك الأب التحقق والانتظار وفعل الخادم. لم يترجم الجزء ولا يعرض حقل إدخال حقيقياً؛ يعزل حد التواصل. تقدم خصائص رد النداء بديلاً مباشراً لأنماط أحداث المكونات الأقدم. استعمل onclick الموثقة لحدث DOM ونسق أسماء عقد المكون وأنواعه. يظل المرور بالنقر سلوكاً مستنتجاً لا اختبار حدث، ولا يعني نجاح الطلب المحلي أن الخادم حفظ النص المقترح أو أن الأب سيقبل كل اقتراح.
<script>
let { title, onrename } = $props();
</script>
<h2>{title}</h2>
<button onclick={() => onrename("Revised course title")}>Suggest title</button>يطلب الابن تغييراً ولا ينفذ الحفظ، ولم يشغل حدث أو رد نداء.
اجعل تدفق الاتجاهين تفعيلًا مقصوداً
تعلم $bindable خاصية تدعم عقد الربط، وتفيد تحكماً مصمماً لا كل خاصية متداخلة. حدد الافتراض والمسؤولية وافحص البديل ولا تفترض أن كائناً افتراضياً صار وكيلاً. يختلف تجاوز خاصية محلياً وتغيير كائن مشترك. فضل رد النداء إن أوضح القصد والربط إن أفاد API فعلاً، ولا يعوض أيهما تحقق الخادم. يجب أن يبين العقد هل الابن يطلب تعديلاً أو يشارك تحرير قيمة معلنة، حتى لا يستغرب الأب تغيراً في حقل لم يمرره بوصفه قابلاً للتحرير أصلاً.
اختبر حمولة قصد ضيقة دون تغيير مشترك
تعيد الدالة قصداً جديداً بمعرف وعنوان منسق ويبقى السجل ثابتاً. نموذج رسالة مجال لا callback أوbindable. لا يحتاج الابن كيان تخزين متغيراً لاقتراح تعديل واحد. تحقق من النص والطول عند الحد وفوض الحالي قبل الكتابة. يمكن تزوير حدث يبدو موثوقاً فلا يصبح أمراً غير مقيد للمستودع. يفيد اختبار ثبات السجل في كشف تعديل مبكر داخل محول القصد، ويحتاج الدمج الحقيقي اختبار أن الأب يرسل البيانات الصحيحة ولا يمسك مرجع كائن مشترك يغيره مسار آخر.
function renameIntent(record,title) {return {type:"rename-course",id:record.id,title:title.trim()};}
const source={id:"c1",title:"Original"};
const intent=renameIntent(source," Revised ");
console.assert(intent.id==="c1" && intent.title==="Revised");
console.assert(source.title==="Original" && intent!==source);يبنى قصد جديد ويبقى الأصل دون تغيير، دون اختبار ربط أو مكتبة تحقق أو خادم.
احفظ الخصائص الحالية ونتائج الخادم المعتمدة
قد تقادم القيمة المنسوخة باستبدال الأب لمدخله. اقرأ بالعقد التفاعلي وأنشئ تحريراً محلياً بقصد. سو تنسيق الخادم والتعارض والرفض ولا تجعل استدعاء callback نجاحاً. يقلل الانتظار النقر العرضي لا يضمن أثراً واحداً. اختبر الاستبدال والتفاعل والربط والرفض معزولاً مأذوناً. ينفذ المقرر القصد فقط دون تحذير ملكية أوتحديث $props أو$bindable أوDOM. يحفظ التقرير الفرق حتى لا يقدم عدم تغيير كائن JavaScript في المثال دليلاً أن مشاركة الوكيل بين مكونين مضبوطة في التطبيق الفعلي.
الأخطاء الشائعة وإصلاحها
يغير الابن وكيلاً يملكه الأب دون توقع
- لماذا يحدث؟
- عومل إدخال قابل للقراءة كملكية تغيير غير مقيدة.
- كيف تصلحه؟
- استعمل قصد رد نداء أو عقد ربط معلناً بقصد.
- كيف تتجنب تكراره؟
- اختبر حالة الأب بعد كل تفاعل ابن مدعوم.
تتجاهل خاصية منسوخة تغييرات الأب اللاحقة
- لماذا يحدث؟
- اختلطت لقطة وقتية بمدخل تفاعلي مستمر.
- كيف تصلحه؟
- احفظ قراءة الخاصية الحالية أو وثق مسودة محلية مقصودة.
- كيف تتجنب تكراره؟
- أدرج عينات استبدال الأب وإعادة ضبط المسودة.
يوصف رد النداء كحفظ ناجح
- لماذا يحدث؟
- اختلط قصد الواجهة بنتيجة مجال مؤكدة.
- كيف تصلحه؟
- تتبع الانتظار والرفض والنتيجة المعتمدة كلّاً على حدة.
- كيف تتجنب تكراره؟
- اختبر رفض التعديل وتعارض المصدر بجانب النقر.
اختبر فهمك
1. هل تفوض $bindable الابن بتحديث قاعدة البيانات؟
اعرض الحل المشروح
لا. تعلن قدرة تدفق داخل المكونات لا سلطة مستدع أو حفظاً. يتحقق مدخل الخادم من القيمة والهوية الحالية وسياسة الكائن. افصل ملكية المكون عن التفويض حتى مع سهولة ربط الاتجاهين.
2. لماذا تعيد قصد إعادة تسمية بدلاً من إعطاء الابن كياناً متغيراً؟
اعرض الحل المشروح
يعبر القصد الضيق عن العملية المطلوبة ولا يكشف حقولاً متغيرة غير معنية، ويسهل اختباره وتمريره للتحقق والانتظار والحالة المشتركة. يظل محتاجاً تحققاً وتفويضاً؛ لا يجعله صغر شكله موثوقاً تلقائياً.
أهم ما تعلمته
- تحتاج الخصائص وردود النداء والربط ملكية حالة صريحة.
- قصد المكون والحفظ المؤكد نتيجتان مختلفتان.