من React إلى Svelte: دليل تحديث المكونات الحديث

Majd Muhtaseb28‏/04‏/20257 دقيقة

من 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 ودالة مجهولة لمعالج الحدث. يستخدم Svelte on: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 على البساطة والأداء بديلاً مقنعًا لتطوير الويب الحديث. ابدأ بمكونات أصغر وقم بتحديث أقسام أكبر من التطبيق تدريجيًا للحصول على انتقال سلس. تذكر الاختبار بدقة بعد كل تحديث.