معالجة تحديثات الحالة في Svelte

كيفية استخدام التعيينات التفاعلية في Svelte للعمل مع تحديثات الحالة داخل أحد المكونات

أحد الأشياء الرائعة في Svelte هو أنك لست بحاجة إلى القيام بأي شيء خاص لتحديث حالة المكون.

كل ما تحتاجه هو مهمة.

لنفترض أن لديك ملفcountعامل. يمكنك زيادة ذلك باستخدام ، ببساطة ،count = count + 1، أوcount++:

<script>
let count = 0
const incrementCount = () => {
count++
}
</script>
{count} <button on:click={incrementCount}>+1</button>

لا يعد هذا شيئًا مبتكرًا إذا لم تكن على دراية بكيفية تعامل أطر عمل الويب الحديثة مع الحالة ، ولكن في React ، سيتعين عليك الاتصالthis.setState()، أو استخدمuseState()صنارة صيد.

يتخذ Vue منهجًا أكثر تنظيماً باستخدام الفئات وdataمنشأه.

بعد استخدام كليهما ، أجد أن Svelte عبارة عن بناء جملة يشبه JavaScript.

نحتاج إلى أن نكون على دراية بشيء واحد ، يتم تعلمه بسرعة كبيرة: يجب علينا أيضًا القيام بمهمة عند تغيير القيمة.

بالنسبة للقيم البسيطة مثل السلاسل والأرقام ، يكون هذا في الغالب معطى ، لأن جميع العمليات في String ترجع سلاسل جديدة ، ونفس الشيء بالنسبة للأرقام - فهي غير قابلة للتغيير.

لكن للمصفوفات؟ لا يمكننا استخدام الطرق التي تغير المصفوفة. يحبpush()وpop()وshift()وsplice()... لأنه لا يوجد مهمة. يغيرون بنية البيانات الداخلية ، لكن Svelte لا يمكنه اكتشاف ذلك.

كذلك أنتعلبةما زلت تستخدمها ، ولكن بعد الانتهاء من عمليتك ، يمكنك إعادة تعيين المتغير لنفسه ، على النحو التالي:

let list = [1, 2, 3]
list.push(4)
list = list

وهو أمر غير بديهي بعض الشيء ، لكنك ستتذكره بسرعة.

أو يمكنك استخدام عامل الانتشار لإجراء العمليات:

let list = [1, 2, 3]
list = [...list, 4]

تحميل مجانيكتيب Svelte

معالجة تحديثات الحالة في Svelte

كيفية استخدام التعيينات التفاعلية في Svelte للعمل مع تحديثات الحالة داخل أحد المكونات

المزيد من البرامج التعليمية svelte: