جادوی واکنشی در Svelte 5: Understanding Runes

در اینجا یک پیش نمایش از Runes است – یک ایده جدید بزرگ برای کدنویسی واکنشی و مهم ترین تغییر Svelte در سال های اخیر.

• Runes در Svelte
• $state()
• $derived()
• $effect()
• $props()
• $inspect()
• نتیجه‌گیری

Svelte 5 بهبودهایی را به همراه دارد – یعنی اجزای عملکردی و پذیرش سیگنال ها – اما در غیر این صورت یک به روز رسانی بیشتر افزایشی است. تنها استثنا، ویژگی جدید Runes است که مجموعه ای از ایده ها را برای مقابله با واکنش پذیری به روشی مدولارتر، مختصر و ریزتر معرفی می کند.

در این مقاله، شما به طور عملی با رون های اصلی ارسال شده با Svelte 5 آشنا خواهید شد: $state()، $derived()، < code>$props()، $inspectI() و $effect().

Runes در Svelte

در نگاه اول، ممکن است به نظر برسد که ویژگی Runes جدید به پیچیدگی کار با Svelte می‌افزاید. در واقع، این ایده رویکرد ساده‌تری برای انجام بسیاری از کارهایی که احتمالاً قبلاً انجام داده‌اید، ارائه می‌کند. اصطلاح رون به یک گلیف جادویی یا یک حرف الفبایی با قدرت های مرموز اشاره دارد. در Svelte، Runes نشانه‌های خاصی هستند که به کامپایلر Svelte می‌گویند که در پشت صحنه به روش‌های خاصی کار کند تا اتفاقات رخ دهد.

یک Rune یک نحو ساده به شما می دهد تا به موتور Svelte بگوید کارهای خاص و مفیدی مانند مدیریت وضعیت و نمایش ویژگی های مؤلفه انجام دهد.

استفاده از Runes در Svelte 5

از زمان نوشتن این مقاله، Svelte 5 هنوز در پیش نمایش است، بنابراین برای استفاده از Runes باید از ساخت های پیش نمایش استفاده کنید. می‌توانید آنها را در اینجا امتحان کنید.

رون های اصلی معرفی شده در Svelte 5 عبارتند از:

• $state()
• $derived()
• $effect()
• $props()
• $inspect()

همانطور که می بینید، Rune تابعی است که با یک کاراکتر علامت دلار پیشوند شده است. به عنوان توسعه دهنده، شما از این توابع ویژه تقریباً مانند هر عملکرد دیگری استفاده می کنید. سپس موتور Svelte از اجرای عمل مورد نظر Rune برای شما در پشت صحنه مراقبت می کند.

$state()

بیایید با نگاه کردن به $state() شروع کنیم، که احتمالاً بیشتر از رون استفاده می‌کنید. در یک مفهوم (بسیار) سست، رون $state از نظر منطقی چیزی شبیه به قلاب React useState() انجام می‌دهد و راهی کاربردی برای مقابله با وضعیت واکنشی ارائه می‌دهد. p>

بیایید یک مثال ساده را در نظر بگیریم. در اینجا نحوه ایجاد یک ورودی و نمایش مقدار آن در Svelte 4، بدون رون آمده است:

<script>
  let text = "Default";
</script>

<input type="text" bind:value={text}/>
Text: {text}

و اکنون، در اینجا همان عملکرد با رون $state وجود دارد:

<script>
	let text = $state("Default")
</script>

<input type="text" bind:value={text}/>
Text: {text}

در هر دوی این نمونه‌ها، ما یک متغیر حالت ساده (text) داریم و از آن برای هدایت یک ورودی متنی استفاده می‌کنیم که به صفحه نمایش خروجی می‌شود. این کد Svelte معمولی است، به خصوص نحو bind:value={text}، که یک راه ساده برای اتصال دو طرفه به ورودی به شما می دهد.

تنها تغییر اینجا این است که، به جای اینکه یک متغیر معمولی را با let text = "Default" اعلام کنیم، آن را به عنوان یک Rune وضعیت اعلام کنیم: let text = $state("Default" "). "پیش‌فرض" که به $state می‌دهیم، مقدار اولیه است.

توجه داشته باشید که فراخوانی bind:value اصلاً لازم نیست تغییر کند: Svelte می داند که چگونه از یک Rune در آن زمینه استفاده کند. به طور کلی، مرجع state rune در هر جایی که یک متغیر کار می کند به درستی عمل می کند.

اگرچه این یک تغییر کوچک است، اما در وضوح یک مزیت آشکار وجود دارد. درست است که کامپایلر Svelte به طور جادویی متوجه می شود که let count = 0 باید زمانی که در بالای یک جزء قرار دارد واکنش نشان دهد. اما همانطور که پایگاه کد رشد می کند، این ویژگی کمی مبهم است، زیرا تشخیص اینکه کدام متغیرها واکنشی هستند دشوار می شود. رون $state این مشکل را برطرف می‌کند.

یک مزیت دیگر این است که $state می‌تواند در همه جا ظاهر شود، نه فقط در سطح بالای اجزای شما. بنابراین، فرض کنید ما یک تابع کارخانه می‌خواستیم که حالت‌های متنی را برای استفاده در ورودی‌های دلخواه ایجاد کند. این یک مثال ساده است:

<script>
	let makeText = function(def){
		let myText = $state(def);
		return { 
			get text() { return myText },
			set text(text) { myText = text },
		}
	}
	let text = makeText("test");
</script>

<input type="text" bind:value={text.text}/>
Text: {text.text}

در حالی که مثال ساخته شده است، نکته این است که اعلان $state() یک حالت واکنشی عملکردی را از داخل یک محدوده متفاوت ایجاد می‌کند – چیزی که به انحرافات در نحو Svelte قدیمی نیاز دارد. همچنین توجه داشته باشید که در این مورد، هم یک گیرنده و هم تنظیم کننده برای متغیر متن ارائه کردیم. این به این دلیل است که فراخوانی bind:value یک اتصال دو طرفه است که نیاز به دسترسی خواندن و نوشتن به شیء حالت دارد.

یکی دیگر از ویژگی های جالب رون $state() این است که به طور خودکار به اعضای یک شی متصل می شود:

<script>
	let valueObject = new class { 
		text = $state('I am a test')
		num = $state(42)
	};
</script>

<input type="text" bind:value={valueObject.text}/>
<input type="number" bind:value={valueObject.num}/>
<br>
Text: {valueObject.text}
<br>
Number: {valueObject.num}

ماهیت این قطعه این است که ویژگی‌های text و num کلاس valueObject به طور خودکار به‌درستی به ورودی‌ها متصل می‌شوند، بدون اینکه به طور صریح اعلان گیرندگان و ستترها. Svelte به طور خودکار دریافت کننده ها و تنظیم کننده های مورد نیاز شی برای دسترسی به ویژگی های کلاس valueObject را فراهم می کند.

سیگنال ها

در زیر هود، Svelte از سیگنال‌هایی برای اجرای واکنش‌پذیری Rune استفاده می‌کند. توسعه دهنده مجبور نیست به آن فکر کند. یک مزیت کلیدی این است که واکنش‌پذیری «زنده» است. در مدل قدیمی واکنش‌پذیری Svelte، مقدار حالت در برخی موارد کهنه می‌شود. این دیگر مشکلی نیست.

$derived()

در گذشته، می‌توانستید یک ویژگی مشتق شده با استفاده از نحو $: در Svelte ایجاد کنید. این محدودیت‌هایی داشت، از جمله اینکه مقادیر ممکن است کهنه شوند، زیرا موتور فقط زمانی که جزء به‌روزرسانی می‌شد، مقدار محاسبه‌شده را به‌روزرسانی می‌کرد. Svelte 5 دستور $: را با $derived() جایگزین می‌کند، که مقدار محاسبه‌شده را همیشه همگام نگه می‌دارد.

در اینجا مثالی از استفاده از $derived برای ترکیب رشته‌ها از ورودی‌های متن آورده شده است:

<script>
	let greeting = $state("Hello there");
	let name = $state("User");
	let sentence = $derived(greeting + " " + name);
</script>

<input type="text" bind:value={greeting}/>
<input type="text" bind:value={name}/>
<br>
Text: {sentence }

کاری که ما در اینجا انجام می دهیم این است که از متغیر جمله به عنوان رون مشتق شده استفاده می کنیم. از رونهای حالت احوالپرسی و نامگذاری گرفته شده است. بنابراین، یک رون مشتق شده، حالات متغیرهای حالت را ترکیب می کند.

استفاده از $derived(greeting + “ “ + name) تضمین می‌کند که هر زمان که تبریک یا نام تغییر کند، متغیر جمله آن تغییرات را منعکس می‌کند.

$effect()

$effect رونی است که شبیه به اثر ()useState React کار می‌کند. برای ایجاد اثرات خارج از موتور راکتیو استفاده می شود. در اینجا یک مثال از اسناد Svelte آورده شده است:

$effect(() => {
  // runs when the component is mounted, and again
  // whenever `count` or `doubled` change,
  // after the DOM has been updated
  console.log({ count, doubled });

  return () => {
   // if a callback is provided, it will run
   // a) immediately before the effect re-runs
   // b) when the component is destroyed
	console.log('cleanup');
  };
});

هدف این کد این است که هنگام نصب کامپوننت، ورود به سیستم را اجرا کند، و سپس هر زمان که متغیرهای وابسته count و doubled اصلاح شوند. مقدار بازگشتی اختیاری به شما امکان می‌دهد قبل از اجرای افکت یا زمانی که مؤلفه جدا می‌شود، هرگونه پاکسازی لازم را انجام دهید.

$props()

$props() روش جدیدی برای اعلام و مصرف ویژگی های مؤلفه در Svelte است. این موارد چند مورد استفاده را پوشش می‌دهد، به ویژه صادرات متغیرها در سطح بالای مؤلفه‌ها با let. یک مثال ارزش هزار کلمه دارد و به طور کلی نحو جدید $props تمیز و واضح است:

// main.svelte
<script>
  import Component2 from './Component2.svelte';
</script>
<Component2>
</Component2>
<Component2 prop2 = "test">
</Component2>

// Component2.svelte
<script>
let { prop1 = "foo", prop2} = $props();
</script>
{prop1}
<br>
{prop2}

//outputs:
foo
foo
test

در اینجا، مؤلفه main.svelte Component2 را وارد می‌کند و نحوه اصلاح پروپوزال‌ها را از طریق ویژگی‌های روی نشانه‌گذاری نشان می‌دهد. توجه داشته باشید که Component2 می تواند مقادیر پیش فرض مانند prop1 = "foo" را اعلام کند.

$inspect()

آخرین رونی که به آن نگاه خواهیم کرد $inspect است. این یک نوع بیانیه logging کنسول واکنشی است:

<script>
	let count = $state(0);
	let message = $state('hello');

	$inspect(count, message); // will console.log when `count` or `message` change
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />

در این مثال (برگرفته از اسناد Svelte)، هدف این است که هر زمان که تعداد متغیرهای پیام تغییر کرد، یک دستور ورود به سیستم ارسال شود. در اصل، در پاسخ به به‌روزرسانی‌های متغیر، راه ساده‌ای را در اختیار شما قرار می‌دهد تا به صورت واکنشی وارد کنسول شوید.

نتیجه گیری

اثر کلی Runes ساده کردن Svelte API برای توسعه دهندگان است. تطبیق با نحو جدید و انتقال کدهای موجود کمی طول می کشد، اما به طور کلی، رویکرد جدید واقعا آسان تر است. اگر استثنایی وجود داشته باشد، این رون $effect() است که قبل از استفاده برای جایگزینی رویکردهای موجود، نیاز به تفکر بیشتری دارد. ظرافت $state()، $derived() و $props() بیش از جبران $effect( پیچیدگی ). در مجموع، ویژگی جدید Runes یک ایده جدید و خوش‌آمد در واکنش‌پذیری است.