چرا React ساخته شد؟

فریم‌ورک‌های MVC جاوا اسکریپتی زیادی وجود دارد ولی چرا React؟ در این پست به دلایلی که React را به یک کتابخانه محبوب تبدیل کرده است می‌پردازیم.

یک فریم‌ورک MVC نیست

در حقیقت React یک فریم‌ورک MVC نیست بلکه یک کتابخانه‌ای برای ساخت رابط‌های کاربری ترکیبی است. با استفاده از این کتابخانه رابط‌های کاربری قابل استفاده مجدد ساخته می‌شود که برای نمایش داده‌های تغییر‌پذیر مناسب است.

از قالب‌ها (Templates) استفاده نمی‌کند

به طور سنتی، UI‌های کاربردی وب با استفاده از قالب‌ها یا دستورات HTML ساخته می‌شوند. این قالب‌ها مجموعه‌ای کامل از ابسترکشن‌هایی هستند که شما مجاز به استفاده از آن برای ساخت رابط کاربر خود هستید.

کتابخانه React رویکردهای ایجاد رابط کاربر را با شکست آنها به اجزاء مختلف مهیا می‌سازد. این به این معناست که React یک زبان برنامه نویسی کامل و واقعی برای نمایش دادن است که ما آن را به عنوان یک مزیت نسبت به قالب‌ها می‌دانیم.

  • جاوا اسکریپت یک زبان برنامه نویسی قدرتمند و انعطاف پذیر است که توانایی ساخت ابسترکشن‌ها را دارد. این در برنامه‌های بزرگ بسیار حائز اهمیت است.
  • با ادغام نشانه گذاری (markup)، کتابخانه Reactمی‌تواند به راحتی نمایش‌ها را گسترش داده و نگهداری کند.
  • با پختن یک درک از نشانه گذاری و محتوا به جاوا اسکریپت، هیچ استرینگ سلسله مراتبی دستی و بنابراین آسیب پذیری برای XSS وجود ندارد.

به‌روز‌رسانی‌های React بسیار ساده است

هنگامی که اطلاعات شما در طول زمان تغییر می‌کند، React واقعا واکنش نشان می‌دهد.

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

کتابخانه React یک رویکرد متفاوتی دارد.

وقتی کامپوننت شما برای اولین بار مقداردهی شود، روش رندر فراخوانی (call) می‌شود و یک نمایشگر سبک‌وزن را نمایش می‌دهد. از این نمایشگر، یک استرینگ نشانه گذاری تولید می‌شود و به سند تزریق می شود. وقتی داده‌ها تغییر می‌کنند، روش رندر دوباره فراخوانی می‌شود. برای انجام به روز رسانی به صورت مؤثر، مقدار بازگشتی از فراخوانی قبلی را برای رندر با یک diff جدید و یک مجموعه‌ای حداقل از تغییرات را برای DOM اعمال می‌کنیم.

داده‌هایی که از رندر باز می‌گردند، نه یک استرینگ و نه یک گره DOM است – بلکه یک توضیح سبک‌وزن است که DOM به چه صورت باید باشد.

ما این فرآیند را reconciliation می‌نامیم. برای نمونه مثال reconciliation می‌توانید این مثال را مشاهده کنید.

از آنجا که این رندر مجدد خیلی سریع است (حدود یک میلی ثانیه برای TodoMVC)، توسعه دهنده نیازی به مشخص کردن اتصال داده‌ها ندارد. این رویکرد ساخت برنامه‌ها را آسان‌تر ساخته است.

زبان HTML فقط یک شروع است

از آنجا که React دارای نشانگر سبک وزن در سند خود می‌باشد، می توانیم برخی از چیزهای بسیار هوشمند را با آن انجام دهیم:

  • فیس‌بوک دارای نمودارهای پویا است که <canvas> بجای HTML رندر می‌شود.
  • اینستاگرام یک برنامه وب "تک صفحه" است که به طور کامل با React و Backbone.Router ساخته شده است.
  • استفاده از پروتوتایپ‌های داخلی که React برای ردیابی نمایش‌های بومی iOS از طریق پل Objective-C استفاده می‌کنند.
  • شما می‌توانید React را برروی سرور برای سئو، عملکرد، اشتراک‌گذاری کد و انعطاف‌پذیری کلی استفاده کنید.
  • رویدادها در تمامی مرورگرها (از جمله IE8) در یک روش سازگار و سازگار با استانداردها رفتار می‌کنند و به طور خودکار از اعلان رویداد استفاده می‌کنند.

برای بررسی آنچه که تیم React ساخته به https://reactj.org بروید. مستندات زیادی برای ساخت برنامه‌ها با چارچوب اصولی طراحی شده است.

برای مطالعه پست‌های بیشتر ما را در وبلاگ کارادمی و یا در ویرگول دنبال کنید.