العودة للمقالات

دليل عملي للهجرة من React إلى Svelte

المؤلفMajd Muhtaseb28‏/04‏/20258 دقيقة
دليل عملي للهجرة من React إلى Svelte

لماذا تهاجر إلى Svelte؟

تقدم Svelte نهجًا قائمًا على المكونات مثل React، لكنها تقوم بتجميع التعليمات البرمجية الخاصة بك إلى JavaScript عادي عالي الكفاءة في وقت الإنشاء. يؤدي هذا إلى أحجام حزم أصغر وأداء وقت تشغيل أفضل. دعنا نستكشف كيفية الانتقال من React إلى Svelte.

1. فهم الاختلافات الأساسية

تستخدم React نموذج DOM افتراضيًا وتعتمد على المصالحة لتحديث واجهة المستخدم. من ناحية أخرى، Svelte عبارة عن مترجم يقوم بتحديث DOM جراحيًا عندما تتغير حالة تطبيقك. هذا يلغي النفقات العامة لنموذج DOM الافتراضي.

React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>العداد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

export default Counter;

Svelte:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<p>العداد: {count}</p>
<button on:click={increment}>زيادة</button>

لاحظ كيف تستخدم Svelte تعيينات JavaScript القياسية (count += 1) لتحديث الحالة، ويعكس القالب التغييرات تلقائيًا.

2. هيكل المكون

مكونات React هي وظائف JavaScript أو فئات تُرجع JSX. يتم تعريف مكونات Svelte في ملفات .svelte، والتي تجمع بين HTML و CSS ومنطق JavaScript.

3. ربط البيانات

تستخدم React ربط البيانات أحادي الاتجاه مع setState لتحديث واجهة المستخدم. تستخدم Svelte التصريحات التفاعلية ($:) لتحديث أجزاء من المكون الخاص بك تلقائيًا عند تغير التبعيات.

تصريح Svelte التفاعلي:

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<p>العداد: {count}</p>
<p>مضاعف: {doubled}</p>
<button on:click={() => count += 1}>زيادة</button>

4. الخصائص والحالة

في React، يتم تمرير الخصائص من المكونات الأصل، وتتم إدارة الحالة داخليًا. في Svelte، يتم الإعلان عن الخصائص باستخدام export let، ويتم الإعلان عن الحالة ببساطة كمتغيرات.

خصائص Svelte:

<script>
  export let name;
</script>

<h1>مرحباً، {name}!</h1>

5. معالجة الأحداث

تستخدم React أحداثًا اصطناعية، بينما تستخدم Svelte أحداث DOM الأصلية. معالجة أحداث Svelte أكثر إيجازًا.

React:

<button onClick={handleClick}>اضغط هنا</button>

Svelte:

<button on:click={handleClick}>اضغط هنا</button>

6. ترحيل مكون بسيط

دعنا نقوم بترحيل مكون React بسيط إلى Svelte.

React:

import React from 'react';

function Greeting({ name }) {
  return <h1>مرحباً، {name}!</h1>;
}

export default Greeting;

Svelte:

<script>
  export let name;
</script>

<h1>مرحباً، {name}!</h1>

7. الترحيل التدريجي

من الأفضل الترحيل تدريجيًا. ابدأ بالمكونات الصغيرة والمستقلة. استخدم أدوات مثل svelte-hmr للاستبدال السريع للوحدات النمطية أثناء التطوير.

خاتمة

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