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

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

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

عملکرد جزء

useMemo

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

ساختار جزء

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

قلاب

خواص تخریب در داخل render یا تعاریف قلاب

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

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

SolidJS

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

SolidJS

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

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

استفاده شده با

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

React و SolidJS مؤلفه‌های یکسانی را ارائه می‌کنند، اما هر فریم‌ورک یک رویکرد رندر منحصر به فرد دارد. کامپوننت‌های React هر بار رندر می‌شوند (بدون استفاده از یادداشت)، در حالی که مؤلفه‌های SolidJS فقط یک بار رندر می‌شوند.

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

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

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

پیشوند

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

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

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

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

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

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

SolidJS در مقابل React

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

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

اثر

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

ویژگی

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

حفظ کردن

اجزای خالص

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

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

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

ابزار داربست

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

useCallback

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

memo

بیایید تفاوت‌های عملکردی پیچیده‌تر را بررسی کنیم: حالت، حافظه‌سازی و جلوه‌ها.

دولت

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

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

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

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

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

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

کارایی

ماهیت اعلامی

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

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

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

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

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

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

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

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

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

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

قلاب یادداشت

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

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

SolidJS

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

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

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

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

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

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

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



منبع

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

شرح

رندر مشروط

ویژگی

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

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

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

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

پشتیبانی از TypeScript

Matthew Newman

Matthew Newman Matthew has over 15 years of experience in database management and software development, with a strong focus on full-stack web applications. He specializes in Django and Vue.js with expertise deploying to both server and serverless environments on AWS. He also works with relational databases and large datasets
[ Back To Top ]