انتشار: آذر 29، 1401
بروزرسانی: 25 خرداد 1404

SolidJS در مقابل React: The Go-to Guide

✔

در مقابل، بنیانگذار SolidJS موفق شد از تمام این رفت و آمدها طفره برود. با استفاده از مکانیزمی به نام واکنش ریز دانه برای دستکاری مستقیم DOM مرورگر، SolidJS ردپای حافظه بسیار سبک تری را ارائه می کند و برنامه ای فوق العاده سریع از ویرایش های صفحه و کد تزریقی را ارائه می دهد.

هدف، واقعگرایانه

بررسی موارد استفاده خاص پروژه شما می تواند نشان دهد که کدام چارچوب از نظر بهره وری انتخاب بهتری است.

SolidJS در مقابل React

✔

برای اینکه یک توسعه دهنده React در SolidJS که از درس ها، ساختار و رویکردهای انتزاعی آموخته شده در طول عمر React استفاده می کند، سرعت بگیرد، تقریباً هیچ منحنی یادگیری وجود ندارد. من به شما توصیه می کنم از همین امروز استفاده از SolidJS را شروع کنید—ممکن است آینده front end باشد.

هم در React و هم در SolidJS مدرن، یک کامپوننت از a render تابع با خواص به عنوان آرگومان. همراه با هر جزء JSX، کد دقیق و مختصر است. JSX آسان است و به توسعه دهندگان باتجربه اجازه می دهد تا به صورت بصری مدل یک جزء را در تعریف آن توصیف کنند.

✔

اولیه های واکنشی

memo

SolidsJS و React دارای تفاوت هایی در عملکرد هستند که فراتر از رویکردهای آن ها در حفظ کردن است. این دو زبان به روش های بسیار متفاوتی به دستکاری HTML برخورد می کنند. نقطه کانونی این تفاوت نحوه به روز رسانی DOM مرورگر است.

رندر سمت سرور (یعنی هیدراتاسیون)

رندر مشروط

ابزار داربست

واکنش نشان دهید

✔ به طور موثر و بومی از این پشتیبانی می کند.

من کاملاً به رویکرد TL;DR اعتقاد دارم، بنابراین تفاوت های اصلی React و SolidJS را در جدول زیر خلاصه کرده ام و ارائه کرده ام:

در ظاهر، SolidJS و React به نظر نزدیک به هم مرتبط هستند. چارچوب های سمت کلاینت متقابل قابل درک هستند و هر دو برای ایجاد برنامه های تک صفحه ای (SPA) استفاده می شوند. در حالی که تجربه توسعه دهنده برای هر دو تقریباً یکسان است، مکانیسم های اساسی هر فریم ورک تضاد قابل توجهی دارند.

شناسایی و ردیابی وابستگی های اجزا

✔

React برای رندر سریع برنامه های آن به حافظه سازی بستگی دارد. در مقابل، به دلیل ردیابی تغییرات بهینه و استفاده از DOM، SolidJS به ندرت به یادداشت صریح نیاز دارد. برای موارد لبه شدید که در آن تغییرات پایه کامپوننت مستلزم به روزرسانی رندر نیست، SolidJS ذخیره سازی را از طریق یک واحد مدیریت می کند. روش نامیده می شود createMemo.

کارایی

افکت یک تابع ویژه است که یک بلوک اصلی در React و SolidJS است. به جای پاسخ دادن به تعامل مستقیم کاربر با مرورگر، هنگامی که یک حالت جزء تغییر می کند، یک افکت فعال می شود، شبیه به تماس یا شنونده رویداد.

SolidJS

جریان داده های یک طرفه

create (به عنوان مثال، createSignal)

SolidJS

✔ به صورت دستی وابستگی های مؤلفه را با useEffect برچسب گذاری می کند.

✔

رندر همزمان (یعنی تعلیق)

✘

مولفه هایی که بر پایه عملکرد تکیه دارند

اینها توابعی هستند که برای اجرا در زمانی که فریمورک در زمان های خاصی در چرخه حیات یک جزء فعال می شوند، اجرا می شوند.

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

ادامه مطلب در وبلاگ مهندسی تاپتال:

منبع

قلاب یادداشت

ویژگی

استفاده از مولفه های حالت بدون نشانه گذاری

✔ به طور خودکار وابستگی های اجزا را شناسایی و ردیابی می کند.

وقتی بهره وری توسعه دهندگان را در React در مقابل SolidJS در نظر می گیریم، چند ملاحظات کلیدی وجود دارد:

پشتیبانی درجه یک JSX

گاهی اوقات، یک چارچوب نیاز به ردیابی اطلاعات و ویژگی های خاص مرتبط با یک جزء دارد. این مفهوم به عنوان state شناخته می شود و در React با the قابل دسترسی است useState عملکرد. در SolidJS این مفهوم به عنوان سیگنال شناخته می شود و تابع ایجاد مربوط به آن است createSignal.

✔

✔ برای اجرای یک حالت مشترک بین چندین مؤلفه به اسکریپت بیشتری نیاز دارد.

بنیانگذار React یک DOM مجازی سبک وزن به آن داد تا با DOM واقعی مرورگر ارتباط برقرار کند. کد React باعث می شود که DOM مجازی خودش با رندر شدن اجزا به روزرسانی شود. سپس React DOM مجازی به روز شده را با DOM مرورگر مقایسه می کند و تغییرات شناسایی شده به ساختار واقعی صفحه (یعنی DOM) وارد می شود.

useCallback

✘

اجزای خالص

اکنون به جزئیات بیشتر در مورد شباهت ها و تفاوت های React و SolidJS خواهیم پرداخت.

ساختار جزء

✔

✘

اینها توابعی هستند که APIهای آنها شبیه به هوک است.

من تجربه قابل توجهی با SolidJS و React دارم. از دیدگاه من، SolidJS برنده واضح این دو است. SolidJS با قدرت و ویژگی های قوی React مطابقت دارد. علاوه بر این، پاسخگویی سریعی را به کاربران نهایی ارائه می دهد که با React بی نظیر است.

اگرچه من وسوسه می شوم که مقاله را در اینجا پایان دهم و بگویم که SolidJS به دلیل سرعت آن برنده واضح است، بحث در مورد اینکه چگونه این دو فریم ورک از نظر کارایی توسعه دهندگان روی هم چیده می شوند، مهم است.

بهره وری توسعه دهندگان

✔

React یک اثر را با the تعریف می کند useEffect تابع، در حالی که SolidJS از createEffect عملکرد.

حفظ کردن

هر دو فریم ورک SPA مسئول تقسیم ساختار و عملکرد صفحه وب برنامه هستند، اما در یک مرورگر، این چارچوب ها عناصر HTML صفحات را به گونه ای متفاوت دستکاری می کنند تا تجربه کاربری مورد نظر را ارائه دهند. SolidJS و React در استفاده آنها از Document Object Model (DOM). بیایید توضیح دهیم که چگونه اجزای React و SolidJS به منطق برنامه اجازه تقلید از یک وب سایت چند صفحه ای می دهند.

یک مقایسه مختصر

جامعه و اکوسیستم غنی

✔

useMemo

در زیر هود، هم هوک ها و هم اولیه های واکنشی راهی برای اتصال به سیستم های مدیریت تغییر React و SolidJS مربوطه هستند. به طور کلی، این دو چارچوب عملکردهای مؤلفه را به شیوه ای مشابه مدیریت می کنند، اما از روش ها یا نامگذاری های متفاوتی برای انجام این کار استفاده می کنند.

با عملکرد بالا

use (به عنوان مثال، useState)

✔

✔ از این ویژگی پشتیبانی می کند.

React و SolidJS دقیقاً ساختارهای برنامه نویسی و پشتیبانی از مؤلفه ها (تکه های کد جداگانه و قابل استفاده مجدد) دارند.

✔

پشتیبانی از TypeScript

✔

توابع هوک مستقل از یکدیگر هستند، اما می توانند قلاب های دیگر را از داخل همان جزء فراخوانی کنند. چنین زنجیره های فراخوانی امکان عملکردهای پیچیده تری را فراهم می کنند و کد را به زیر تابع ها تشکیل می دهند.

✔

یک جزء بدون عملکرد فقط نشانه گذاری است. پس چگونه React و SolidJS کامپوننت ها را عملیاتی می کنند؟ رویکردهای آنها مشابه است:

	قلاب	عملیات گران قیمت و عملیات جزء

✘

تفاوت دیگر بین این دو فریمورک، ویژگی های متفاوت آنهاست که عملکرد اجزا را فعال می کند.

عملکرد جزء

✔

دستکاری مستقیم DOM

از رندر مجدد کامپوننت جلوگیری می کند

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

واکنش نشان دهید	حالت ها و سیگنال ها داده های مؤلفه را در خود جای می دهند (به شکل پایه)، که چارچوب را قادر می سازد تا تغییرات ارزش را دنبال کند. و هنگامی که فریم ورک تغییری را تشخیص می دهد، مؤلفه با مقدار(های) مطابقت رندر می شود. اثر خواص تخریب در داخل `render` یا تعاریف قلاب	ویژگی	✔
React و SolidJS مؤلفه های یکسانی را ارائه می کنند، اما هر فریم ورک یک رویکرد رندر منحصر به فرد دارد. کامپوننت های React هر بار رندر می شوند (بدون استفاده از یادداشت)، در حالی که مؤلفه های SolidJS فقط یک بار رندر می شوند. SolidJS
استفاده شده با
شرح
✔	ماهیت اعلامی	بیایید تفاوت های عملکردی پیچیده تر را بررسی کنیم: حالت، حافظه سازی و جلوه ها. دولت واکنش نشان دهید	✔

مستندات توسعه دهنده عالی

واکنش ریز دانه وابستگی های متقابل متغیر را دنبال می کند. بر اساس وابستگی متغیر و زنجیره های ویرایش، SolidJS به روزرسانی های ساختار صفحه ما را محدود می کند تا فقط آنچه را تغییر داده است منعکس کند و از رندرهای غیرضروری اجزا عبور کند. این منجر به بهبود عملکرد گسترده نسبت به React می شود.

✔

✘ از این ویژگی خارج از جعبه پشتیبانی نمی کند، اما این پروژه آب و برق شکاف را پر می کند

✔

ما می توانیم استدلال کنیم که – چون React به طور پیش فرض، با تکیه بر محاسبات تفاوت DOM برای به روزرسانی ها، مؤلفه ها را دوباره رندر می کند – React دو بار کار خود را انجام می دهد. از آنجایی که کامپوننت ها را هر بار رندر می کند، React برای جلوگیری از محاسبات غیرضروری و تکراری به حافظه سازی نیاز دارد.

پیشوند