نگاهی دست اول به رویکرد ساده و قدرتمند به جاوا اسکریپت فعال جلویی داشته باشید که به سرعت Solid را به محبوبیت تبدیل می کند.
SolidJS یک رویکرد منحصربهفرد برای جاوا اسکریپت واکنشگرای front-end است. این مجموعه فشرده ای از “اولیه های” واکنشی را فراهم می کند و از آنها برای پشتیبانی از عملکردهای مرتبه بالاتر استفاده می کند. این تا حدودی شبیه AngularJS و استفاده آن از ReactiveX است، اما تجربه کاملا متفاوتی است. SolidJS بیشتر شبیه به سادگی AlpineJS است، اما مجموعهای از قابلیتهای جاهطلبانهتر را ارائه میکند.
SolidJS به تازگی نسخه ۱.۰ خود را منتشر کرده است. . بیایید نگاهی بیندازیم.
راه اندازی SolidJS
ابتدا، یک پروژه شروع ساده راه اندازی کنید. در دستگاه محلی خود، از دستورات موجود در فهرست ۱ برای شروع چیزی جدید استفاده کنید (این به دنبال اسناد SolidJS است).
فهرست ۱. ایجاد یک پروژه SolidJS جدید
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
اکنون شما یک برنامه ساده SolidJS در حال اجرا دارید. اگر به http://localhost:3000 بروید، صفحه فرود را خواهید دید.
توجه داشته باشید که سرور توسعه دهنده از به روز رسانی های همزمان (از جمله Hot Module Replacement، HMR) پشتیبانی می کند. بنابراین با ایجاد تغییرات در فایلها، آنها بهطور خودکار آنچه در مرورگر نمایش داده میشود، بهروزرسانی میکنند.
در حال واکشی یک API راه دور با createResource
اجازه دهید با createResource
Solid شروع کنیم. این یک لایه ساده در بالای createSignal
است، که اولیه واکنشی Solid است که ارتباط ناهمزمان با APIهای راه دور را مدیریت می کند. ما از اینجا شروع می کنیم زیرا این ویژگی یک لولای کلیدی در پشتیبانی Solid از رندر Suspense/Concurrent است و در ابتدا می تواند کمی مبهم به نظر برسد.
به نوعی، createResource
لایه میانی معماری Solid است.
پوشه جدید ایجاد شده را در IDE خود باز کنید و فایل App.jsx را باز کنید. این فایل به عنوان گره ریشه با فراخوانی به روش render()
Solid در index.jsx بارگذاری می شود.
تغییراتی را که من در فهرست ۲ نظر دادهام انجام دهید.
فهرست ۲. اصلاح App.jsx
import logo from "./logo.svg";
import styles from "./App.module.css";
import { createResource } from "solid-js"; // Import the createResource function from solid
// The next line sets up the actual async function that will do the request. It is a simple wrapper around a fetch call that returns a promise - the promise returned by the call to
// fetch.json(). This function is used by the call to createResource below
const fetchJokes = async (id) => (await fetch(`https://official-joke-api.appspot.com/jokes/programming/ten`)).json();
function App() {
const [jokes] = createResource(fetchJokes); // Here we use createResource to associate from the fetchJokes promise to the results: the jokes variable
return (
<div class={styles.App}>
<!-- The line below uses the built-in loading state that Solid has provided on the jokes variable, initialized above with a call to createResource -->
<span>{jokes.loading && "Loading..."}</span>
<div>
<!-- This line below simply outputs the contents of the jokes var. This will not happen until jokes.loading == true. >
<jokes() -->
<pre>{JSON.stringify(jokes(), null, 2)}</pre>
</div>
<header class={styles.header}>
<img src={logo} class={styles.logo} alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a class={styles.link} href="https://github.com/ryansolid/solid" target="_blank" rel="noopener noreferrer">
Learn Solid
</a>
</header>
</div>
);
}
export default App;
نظرات فهرست ۲ باید به شما نشان دهد که اینجا چه خبر است. نتیجه این کد خروجی یک آرایه JSON است که شامل مجموعه ای از ۱۰ جوک برنامه نویسی تصادفی است.
تکرار با >برای<
حالا بیایید آن JSON را بگیریم و روی آن تکرار کنیم و خروجی مفیدتری ایجاد کنیم.
ابتدا، مولفه For
را با افزودن آن به واردات وارد کنید:
import { createResource, For } from "solid-js";
بعد، تماس JSON.stringify را با Listing 3 جایگزین کنید.
فهرست ۳. تکرار روی آرایه
<ul>
<For each={jokes()}>{(joke) =>
<li>{joke.id}: {joke.setup}</li>
}</For>
</ul>
فهرست ۳ به شما نگاهی به مؤلفه For
در حال کار میدهد. شبیه سایر فریم ورک های واکنشی است. شما به آن می گویید که روی چه مجموعه ای تکرار شود (یعنی jokes()
، به خاطر بسپارید که یک فراخوانی متد است، نه یک مرجع)، و سپس یک تابع ناشناس تعریف کنید که آرگومان آن متغیر تکرار است، شوخی
.
ما در اینجا از این برای خروجی یک لیست نامرتب استفاده می کنیم که شناسه و تنظیمات هر جوک را نشان می دهد.
مدیریت رویدادها در SolidJS
در مرحله بعدی نگاهی به خط پانچ برای هر جوک خواهیم داشت. برای این کار، به یک کنترل کننده رویداد onClick
نیاز دارید که هشداری حاوی خط پانچ را نمایش دهد.
فهرست ۴ نحوه اضافه کردن کنترل کننده را نشان می دهد.
فهرست ۴. onClick handler
<li onClick={()=>{alert(joke.punchline)}}>
{joke.id}: {joke.setup}
</li>
به اندازه کافی ساده است. لیست ۴ بسیار معمولی برای چارچوب های واکنشی است. حالا وقتی روی “برنامه نویسان دوست دارند کجا بنشینند؟” کلیک می کنم. من پاسخ، “فو بار” را دریافت می کنم. این خیلی بد است که خنده دار است.
ساخت متغیرهای واکنشی با createSignal
حالا تصور کنید که میخواهید قابلیت جابهجایی بین نمایش جوکهای برنامهنویسی و همه جوکها را اضافه کنید. API راه دور با وجود یا عدم وجود “برنامه نویسی” در قسمت ماقبل آخر مسیر URL (…/jokes/programming/ten vsus …/jokes/ten) این کار را انجام می دهد.
بنابراین بیایید یک چک باکس به بالای صفحه اضافه کنیم تا کاربر این مورد را تغییر دهد. اولین کاری که ما انجام خواهیم داد ایجاد یک “سیگنال” است. این بنیادی ترین واکنش اولیه اولیه در SolidJS است. این به شما امکان می دهد یک متغیر، یک تنظیم کننده و یک مقدار پیش فرض اختیاری را مشخص کنید. این نحو از نحو useState
در React الهام گرفته شده است.
بالای تماس createResource
، این خط را اضافه کنید:
const [jokeType, setJokeType] = createSignal("");
این یک سیگنال جدید به نام jokeType
با مقدار اولیه یک رشته خالی ایجاد می کند. مقادیر سیگنال به عنوان یک تابع قابل دسترسی هستند: jokeType()
.
اکنون عنصر چک باکس نشان داده شده در فهرست ۵ را در سر قسمت اصلی وارد کنید.
فهرست ۵. یک چک باکس واکنشی
Programming Only: <input type="checkbox" checked={jokeType()=="programming/"}
onInput={()=>{setJokeType(jokeType()==''?'programming/':'')}}> </input>
فهرست ۵ عمدتاً HTML معمولی است. ویژگی های بررسی شده
و onInput
دارای محتوای خاص Solid هستند. بررسی شده
از یک نشانه برای بررسی مقدار سیگنال jokeType()
در برابر "programming/"
استفاده می کند. به این معنا که اگر مقدار jokeType
"programming/"
باشد، کادر علامت زده میشود.
onInput
رویداد ورودی را در کادر تأیید کنترل میکند. هنگامی که فعال می شود، مقدار jokeType
را تغییر می دهیم تا بین یک رشته خالی و "programming/"
جابجا شود. ما قصد داریم از این مقدار در حال تغییر در URL واکشی جوک استفاده کنیم.
استفاده از سیگنال در منبع
ابتدا، باید سیگنال را به عنوان آرگومان به تماس createResource
ارسال کنید. Solid به اندازه کافی هوشمند است که این را تشخیص دهد و منبع را به صورت واکنشی سیم کشی می کند. فراخوانی جدید برای createResource
به این صورت است:
const [jokes] = createResource(jokeType, fetchJokes);
(با تشکر از رایان کارنیاتو برای توضیح این موضوع.)
توجه کنید که jokeType
مستقیماً ارسال می شود (نه فراخوانی تابع، بلکه خود تابع). این به این دلیل است که سیگنال واقعی به createResource
ارسال میشود و به آن اجازه میدهد تا واکنشپذیر باشد.
عملکرد جدید واکشی جوک در فهرست ۶ مشاهده می شود.
فهرست ۶. منبع واکنشی با آرگومان سیگنال
const fetchJokes = async (jokeType) => {
return (await fetch(`https://official-joke-api.appspot.com/jokes/${jokeType}ten`)).json();
}
توجه کنید که سیگنال jokeType
یک متغیر مستقیم در آرگومان فهرست ۶ است. URL واکشی از مقدار jokeType
استفاده می کند. هنگامی که سیگنال از طریق کادر انتخاب تغییر می کند، Solid متوجه می شود و به طور خودکار لیست جوک ها را دوباره واکشی می کند.
افکت های محاسبه شده با createEffect
کتابخانههای واکنشگرا شامل توانایی بستهبندی متغیرهای واکنشپذیر ساده (مانند createSignal
در SolidJS، یا useState
در React) در چیزی است که به عنوان اثر شناخته میشود (مثلاً useEffect
در React). Solid createEffect
را برای این منظور فراهم می کند. ایده اصلی این است که شما از یک افکت برای مدیریت اعمال غیر خالص (معروف به عوارض جانبی) استفاده می کنید. چنین اقداماتی معمولاً به معنای تغییر مستقیم بخشی از UI در نتیجه تغییرات در متغیرهایی است که به آنها وابسته هستند.
درک جلوهها در ابتدا کمی سخت است. یک راه خوب برای فکر کردن در مورد آن این است که یک اثر به جای پاسخ دادن به یک تغییر ارزش، کاری را انجام می دهد.
فرض کنید وقتی کاربر نوع جوک را تغییر میدهد میخواستید وارد شوید. این یک مثال ساختگی برای ارتباط با ماهیت است. فهرست ۷ نشان می دهد که چگونه می توانید آن را انجام دهید.
فهرست ۷. مثال createEffect
createEffect(() => {
console.log('Joke Type is now: ', jokeType())
})
اکنون با تغییر سیگنال، کنسول خروجی خواهد داشت. توجه داشته باشید که این افکت در ابتدا با تنظیم isgnal اجرا می شود.
پیشبینی اینکه دنیای جاوا اسکریپت به کجا میرود دشوار است، اما واضح است که SolidJS در حال پیشروی است، به دنبال سرنخهای امیدوارکننده و کاوش در قلمرو جدید است. اگر علاقه به SolidJS با سرعت فعلی به رشد خود ادامه دهد، در مدت کوتاهی یک بازیگر اصلی در این زمینه خواهد بود.
پست های مرتبط
عملی با SolidJS
عملی با SolidJS
عملی با SolidJS