چرا React تا به این حد محبوب است؟

در این مقاله قصد داریم روی محبوبیت ری‌اکت تمرکز کنیم و قصد مقایسه کردن آن با دیگر فریمورک‌ها را نداریم. 

اگر بخواهیم به صورت سریع دلایلی از محبوبیت ری‌اکت را بیان کنیم می‌توانیم به صورت زیر آن‌ها را لیست نماییم:

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

یکی از مهمترین مزیت‌های ری‌اکت Virtual DOM است که سعی می‌شود در ادامه مطلب راجع به آن یک مثال حل کنیم. 

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

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

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

ری‌اکت سه مفهوم طراحی را در خود دارد که بخشی از آن باعث محبوبیت‌ش شده است:

1. استفاده از کامپوننت‌هایی با قابلیت استفاده مجدد، وضعیت پذیر و خوانایی
2. در ری‌اکت، ما رابط‌های کاربری را با استفاده از کامپوننت‌ها تعریف می‌کنیم. می‌توانیم به کامپوننت‌ها مانند توابع ساده‌ای نگاه کنیم. ما این توابع را با ورودی‌های مربوط به خود فراخوانی می‌کنیم و در نهایت نتیجه مورد نظرمان را دریافت می‌کنیم. در این حالت می‌توانیم هر تعداد بار که می‌خواهیم توابع را فراخوانی کنیم و از طریق توابع موجود، توابع بزرگتری را ایجاد کنیم.
3. کامپوننت‌ها نیز دقیقا به همین شیوه هستند؛ ورودی‌های کامپوننت‌ها را خصوصیات و وضعیت می‌نامیم، و یک کامپوننت خروجی یک قسمت از رابط کاربری به حساب می‌آید. می‌توانیم یک کامپوننت را در رابط‌های کاربری مختلف بارها و بارها استفاده کنیم. همچنین کامپوننت‌ها می‌توانند شامل کامپوننت‌های دیگری باشند.
4. با این حال برخلاف توابع خالص، یک کامپوننت ری‌اکت ممکن است یک وضعیت خصوصی داشته باشد و داده‌هایی که ممکن است در طول زمان تغییر کند را در خود نگه دارد. 

1. روش بروزرسانی‌های تعاملی
2. نام ری‌اکت خود یک توضیح ساده در رابطه با این ویژگی‌ است. وقتی که وضعیت یا ورودی یک کامپوننت تغییر می‌کند رابط کاربری نیز تغییرات را در خروجی نمایش می‌دهد. این تغییر در تعریف رابط کاربری در دستگاهی که کاربر در حال کار با آن است منعکس می‌شود.
3. در مرورگر ما نیاز داریم که نمای HTML را در DOM بازسازی کنیم. با استفاده از ری‌اکت ما دیگر نیازی به نگرانی در رابطه با چگونگی و زمان‌بندی تغییرات در مرورگر نخواهیم داشت. ری‌اکت خود به صورت خودکار بروزرسانی‌های مربوط به DOM را اعمال می‌کند.
4. ارائه مجازی Viewها در حافظه
5. با استفاده از ری‌اکت، ما HTML را با جاوااسکریپت می‌نویسیم. در محیط ری‌اکت ما حقیقتا براساس قدرت جاوااسکریپت کار می‌کنیم و HTML را براساس داده‌های موجود ایجاد می‌کنیم. این خلاف حالتی است که در آن HTML را برای کار با داده توسعه می‌دهیم. برای مثال در Angular چنین کاری انجام می‌شود: HTML با ویژگی‌هایی مانند حلقه‌ها، شروط و... توسعه می‌یابد.
6. وقتی که داده را از سرور دریافت کردیم، ما به چیزی فراتر از HTML برای کار با داده‌ها نیاز داریم. در حالتی افرادی از HTML توسعه‌ داده شده استفاده می‌کنند و حالت دیگر آن است که از قدرت جاوااسکریپت برای ایجاد خود HTML بهره ببریم. هر دو حالت مزیت‌ها و عیب‌های مربوط به خود را دارند. 
7. ری‌اکت از حالت دومی بهره می‌برد، زیرا باور دارد که مزیت‌های این حالت بیشتر از معایب آن است. این کار باعث می‌شود که ری‌اکت بتواند یک ارائه مجازی از HTML را در حافظه داشته باشد (چیزی که ما آن را با VDOM نیز می‌شناسیم). ری‌اکت از Virtual DOM در ابتدا برای رندر یک HTML tree به صورت مجازی استفاده می‌کند و بعد با هر تغییری که اعمال می‌شود، HTML tree بجای اینکه از ابتدا نوشته شود، خود را با HTML tree سابق این بار با داده‌های جدید وفق می‌دهد و جایگزین می‌شود. 
8. این پروسه را Tree Reconciliation نیز می‌نامند و به نظر می‌رسد که یکی از مهمترین چیزهایی است که بعد از Ajax در دنیای توسعه وب اتفاق افتاده است.

مثالی از کار با ری‌اکت

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

یک دایرکتوری جدید ایجاد کنید و آن را ادیتور مورد علاقه خود باز کنید:

mkdir react-democd react-demoatom .

یک فایل index.html در دایرکتوری ایجاد کرده و یک قالب استاندارد از HTML را در آن قرار دهید. همچنین یک فایل script.js ایجاد کرده و در فایل HTML قرار دهید. برای تست کار کردن فایل‌ها یک دستور console.log() ساده را نیز در جاوااسکریپت قرار دهید:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Demo</title>
  </head>
  <body>
    <script src="script.js"></script> </body>
</html>

فایل index.html را در مرورگر باز کرده و مطمئن شوید که می‌توانید یک صفحه خالی بدون مشکل را مشاهده کنید، همچنین قسمت کنسول را باز کرده و از وجود پیغام مربوط به console.log مطمئن شوید. 

حال خود کتابخانه ری‌اکت را وارد پروژه‌تان کنید، برای اینکار می‌توانید از طریق وبسایت اصلی ری‌اکت اقدام نمایید. اسکریپت‌های react و react-dom را کپی کرده و آن‌ها را در فایل html قرار دهید:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

این دو اسکریپت متفاوت به یک دلیل مهم در پروژه قرار گرفته است: کتابخانه React خود به تنهایی می‌تواند بدون مرورگر کار بکند، برای اینکه از ری‌اکت همراه با یک مرورگر استفاده کنیم نیاز است که کتابخانه ReactDOM را به پروژه اضافه نماییم.

حال وقتی که مرورگر را نوسازی کردیم، باید هر دو React و ReactDOM را به صورت همگانی در پروژه مشاهده کنیم.

با این پیاده‌سازی ساده حال می‌توانیم به APIهای مربوط به React و ReactDOM دسترسی داشته باشیم. در کنار این موارد ما به APIهای مربوط به جاوااسکریپت نیز دسترسی داریم و قرار است ابتدای کار از آن‌ها استفاده کنیم.

برای افزودن HTML به صورت پویا می‌توانیم از جاوااسکریپت خالص همراه با DOM Web APIهای مربوط به خود مرورگر استفاده کنم. ابتدای کار بیایید یک div با آی‌دی js ایجاد کنیم. از این Div برای قرار دادن محتویات HTML استفاده می‌کنیم. در قسمت body قبل از تگ script خط زیر را اضافه کنید:

<div id="js"></div>

حال در script.js بیایید این div را از طریق آی‌دی دریافت کنیم. نام آن را jsContainer می‌گذاریم. می‌توانیم از دستور document.getElementById برای دریافت div از html استفاده کنیم:

const jsContainer = document.getElementById("js");

برای کنترل محتویات مربوط به div می‌توانیم از innerHTML استفاده کنیم. می‌توانیم از این خاصیت برای اضافه کردن یک قالب HTML نیز استفاده نماییم. بیایید یک div با کلاس demo را همراه با محتویات متنی Hello JS وارد کنیم:

jsContainer.innerHTML = `
  <div class="demo">
    Hello JS
  </div>
`;

حال باید در مرورگر شاهد یک خط جدید که در آن Hello JS نوشته شده است باشید. div مربوط به کلاس demo تا به اینجای کار رابط کاربری ما به حساب می‌آید. بسیار ساده است. تنها یک متن ساده در آن قرار گرفته تا کاربران بتوانند آن را مشاهده نمایند. 

هر دو document.getElementById و element.innerHTML در حقیقت بخشی از DOM Web API محلی هستند. ما با مرورگر از طریق این APIها ارتباط برقرار می‌کنیم. با این حال اگر بخواهیم که از کدهای React استفاده کنیم، بجای این دسته از APIها، از React API استفاده می‌کنیم. 

ری‌اکت مانند یک عامل یا رابط برای مرورگر خواهد بود. بنابراین ما با ری‌اکت ارتباط برقرار می‌کنیم نه با خود مرورگر. البته در آن حالت نیز ممکن است با مرورگر مستقیما ارتباط برقرار کنیم اما بسیار کم!

برای اینکه چنین رابط کاربری که در مرحله قبل ایجاد کردیم را در ری‌اکت نیز پیاده‌سازی نماییم، بیایید یک div جدید با آی‌دی react ایجاد کرده و آن را در index.html قرار دهیم.  درست در زیر div قبلی، کدهای زیر را قرار دهید:

<div id="react"></div>

حال در script.js آن را دریافت کنید:

const reactContainer = document.getElementById("react");

ری‌اکت از reactContainer برای اینکه بداند که اپلیکیشن‌مان را در چه جایی از DOM میزبانی کند، استفاده می‌کند. 

وقتی که این container شناسایی شد، حال می‌توانیم از ReactDOM برای رندر نسخه ری‌اکت در قالب HTML استفاده کنیم. 

ReactDOM.render(
  /* TODO: React's version of the HTML template */,
  reactContainer
)

کاری که ما می‌خواهیم در قدم بعدی انجام دهیم این است که با استفاده از جاوااسکریپت، کدهای HTML مورد نظرمان را بنویسیم. 

برای نوشتن کدهای HTML مربوط به رابط کاربری‌مان، از جاوااسکریپت برای فراخوانی React API استفاده می‌کنیم.

رابط کاربری که با HTML در بالا ایجاد کردیم، معادل با حالت زیر در ری‌اکت است:

ReactDOM.render(
    React.createElement(
      "div",
      { className: "demo" },
      "Hello React"
    ),
    reactContainer
  );

متد React.createElement آرگومان‌های مختلفی دارد:

• اولین آرگومان تگ HTML است که در مثال ما یک Div است.
• دومین آرگومان یک شئ است که شامل تمامی خاصیت‌هایی که ما می‌خواهیم تگ HTML داشته باشد می‌شود. 
• سومین آرگومان نیز محتوای مربوط به المان است. ما یک رشته ساده Hello React  را در آن قرار داده‌ایم.

حال می‌توانیم اپلیکیشن‌مان را تست کنیم. مرورگر باید Hello JS و Hello React را رندر کند. بیایید کمی استایل به هر دو المان که ساخته شده بدهیم. در داخل index.html به صورت زیر عمل کنید:

<style media="screen">
  .demo {
    border: 1px solid #ccc;
    margin: 1em;
    padding: 1em;
  }
</style>

حال ما دو نود مختلف داریم. یکی از آن‌ها از طریق DOM Web API به صورت مستقیم کنترل می‌شود و دیگری از طریق APIهای مربوط به ری‌اکت. تفاوت اصلی بین این دو مورد این است که حالت‌های استفاده از جاوااسکریپت در آن‌ها متفاوت است. در حالت اولی ما از یک رشته ساده برای قرار دادن متن استفاده کردیم، اما در ری‌اکت ما این کار را از طریق یک شئ انجام دادیم. 

مهم نیست که رابط کاربری‌مان به چه اندازه پیچیده باشد، وقتی که از ری‌اکت استفاده می‌کنیم، تمام المان‌های HTML توسط یک شئ به نمایش گذاشته می‌شوند. این کار با فراخوانی React.createElement انجام می‌شود.

منبع