من React إلى Svelte: دليل تحديث المكونات الحديث
مقدمة
قد يبدو تحديث المكونات من إطار عمل إلى آخر أمرًا شاقًا، لكن بساطة Svelte تجعل الانتقال من React سلسًا بشكل مدهش. يقدم هذا الدليل نهجًا عمليًا، مع التركيز على الاختلافات الرئيسية وتقديم أمثلة ملموسة للتعليمات البرمجية.
الاختلافات الرئيسية: React مقابل Svelte
- Virtual DOM مقابل تحديثات Real DOM: يعتمد React على Virtual DOM لتحديثات الواجهة، بينما يقوم Svelte بتجميع التعليمات البرمجية الخاصة بك إلى JavaScript عالي التحسين يقوم بمعالجة DOM مباشرة.
- JSX مقابل قوالب HTML: يستخدم React JSX، وهو امتداد لغة JavaScript. يستخدم Svelte قوالب HTML قياسية مع الحد الأدنى من الإضافات.
- إدارة الحالة: يعتمد React على خطافات
useState
أو مكتبات خارجية مثل Redux. يستخدم Svelte تعيينات متغيرة بسيطة وإعلانات تفاعلية.
مثال بسيط للمكون: زر
دعونا نفكر في مكون زر بسيط في React وما يعادله في Svelte.
React:
import React, { useState } from 'react';
function MyButton({ initialCount }) {
const [count, setCount] = useState(initialCount);
return (
<button onClick={() => setCount(count + 1)}>
تم النقر {count} مرات
</button>
);
}
export default MyButton;
Svelte:
<script>
export let initialCount;
let count = initialCount;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
تم النقر {count} مرات
</button>
شرح:
- في React، نستخدم
useState
لإدارة العدد. في Svelte، نقوم ببساطة بتعريف متغيرcount
. تصبح علامة=
تفاعلية لتحديثات المتغيرات. - يستخدم React
onClick
ودالة مجهولة لمعالج الحدث. يستخدم Svelteon:click
ودالة مسماة للحصول على تعليمات برمجية أنظف. export let initialCount
في Svelte هي الطريقة التي تحدد بها الخصائص.
ربط البيانات
عادةً ما يستخدم React معالجات الأحداث لتحديث قيم النموذج. يقدم Svelte ربطًا ثنائي الاتجاه للبيانات لتسهيل معالجة النماذج.
React:
import React, { useState } from 'react';
function MyInput() {
const [name, setName] = useState('');
return (
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
export default MyInput;
Svelte:
<script>
let name = '';
</script>
<input type="text" bind:value={name} />
شرح:
bind:value={name}
في Svelte ينشئ ربطًا ثنائي الاتجاه، ويقوم بتحديث المتغيرname
تلقائيًا عند تغيير الإدخال.
العرض الشرطي
React:
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <p>مرحبًا بعودتك!</p> : <p>يرجى تسجيل الدخول.</p>}
</div>
);
}
Svelte:
<script>
export let isLoggedIn;
</script>
<div>
{#if isLoggedIn}
<p>مرحبًا بعودتك!</p>
{:else}
<p>يرجى تسجيل الدخول.</p>
{/if}
</div>
شرح:
يستخدم Svelte كتلة {#if}
للعرض الشرطي، مما يجعل القالب أنظف وأكثر قابلية للقراءة.
خاتمة
يتضمن التحديث من React إلى Svelte فهم هذه الاختلافات الأساسية. يوفر تركيز Svelte على البساطة والأداء بديلاً مقنعًا لتطوير الويب الحديث. ابدأ بمكونات أصغر وقم بتحديث أقسام أكبر من التطبيق تدريجيًا للحصول على انتقال سلس. تذكر الاختبار بدقة بعد كل تحديث.