ری اکت چطور کار می کند؟
جلوتر به دام مجازی اشاره کردیم، البته نگفتیم که دقیقا خواسته از دام مجازی در react چیست؟ دراین بخش می خواهیم درباره دام مجازی (Virtual Dom) کلام کنیم. همانگونه که میدانید طراحی سایت در مشهد مرورگر با المنت های Html تارنما شما به صورت ساختار درختی واکنش می نماید. ممکن میباشد برایتان پرسش باشد که خواسته از ساختار درختی چیست؟!
کد های ذیل را در لحاظ بگیرید:
زمانی شما کد های بالا را می نویسید و می خواهید در مرورگر اجرای شان نمایید، مرورگر کد های شمارا طبق یک ساختار درختی که به آن Dom Tree (درخت دام) میگویند، در کنار هم می چیند و در غایت برای کد های بالا ساختار پایین را در لحاظ میگیرد.
عکس پایین را مشاهده کنین:
این دقیقا به عبارتی ساختار درختی میباشد که فراتر برایتان توضیح دادم. ساختار درختی ما از بالا آغاز میشود و فرزندهای هر المنت را به خودش وصل می نماید. با مشاهده تصویر بالا و توضیحاتی که ارائه شد بایستی فهمیده باشید که دام مجازی در react چیست.
هم اکنون شما هنگامی با جاوا اسکریپت یک پروژه را می نویسید و در پروژه تان یک قسمتی از تارنما را با جاوا اسکریپت تغییر‌و تحول بدهید. یعنی شما میخواهید یک بخش از Html و Dom سایت را با Js تغییر و تحول بدهید.
در همین ساختار بالا که توضیح داده شد در‌صورتی‌که شما بخواهید تگ img را تغییر تحول بدهید، سایر بخش هایی از Dom که به img متصل میباشند و با آن رابطه دارا‌هستند را هم تغییر تحول داده و آپ تو دیت می نماید.
در صورتیکه منطقی نگاه کنیم، هنگامی تگ img میخواهد اپدیت خواهد شد دیگر نیاز وجود ندارد هیچ تگ دیگری به روز خواهد شد و در شرایطی‌که همچین اتفاقی بیفتد ممکن می باشد در وب سایت های خرد اثر چشمگیری نداشته باشد البته در وب سایت های گران قدر تخت‌گاز به اینترنت سایتتان جراحت بدون شوخی وارد می نماید.
لهجه اپلیکیشن نویسی react این خلل را حل کرده. ری اکت عزیز جای اینکه با دام حقیقی وواقعی (Real Dom) عمل نماید، برای خودش یک دام مجازی (Virtual Dom) در حیث می گیرد و براین اساس به محض این که تغییری در یکی بخش های وب سایت واقعه بیفتد، ری اکت پیش از این که تغییری روی Real Dom اجرا دهد، نخستین خودش باطن Virtual Dom پژوهش می نماید تا متوجه بشود کدام المنت عوض شده و بایستی آپ تو دیت خواهد شد.
بعداز این پژوهش، تغییر تحول های مایحتاج را روی Real Dom انجام می نماید. ری اکت به امداد دام مجازی صرفا قسمتی که آپ دیت گردیده را تغییر‌و تحول میدهد و بدین ترتیب هیچ اثر منفی روی سرعت تارنما نخواهیم داشت.
زیرا که سوژه دام مجازی و طرز عملکردش درون کادر ورک ری اکت حدودا مشاجره تخصصی میباشد، ممکن میباشد با این توضیحات تئوری مفهومش را آنطور که بایستی متوجه نشوید.
چنانچه میخواهید عالی متوجه گردید که مضمون و همت Virtual Dom در قاب ورک ری اکت چیست، ما آن را کاملا در ویدئوی همین نوشته‌ی‌علمی برایتان توضیح دادیم. توصیه میکنم برای این که‌این نصیب را به نیکی متوجه گردید، مسلما کلیپ را ملاحظه کنید.
چطور یک اپ ری اکت بسازیم؟
درین بخش از نوشته ی علمی میخواهیم با یک نمونه ببینیم که چطور یک نرم افزار ری اکت بسازیم. تا اینجا فهمیدیم فریمورک ری اکت چیست و چه خصوصیت‌هایی داراست؛ ولی، در نصیب میخواهیم زیبایی و آسانی این لهجه را به شما علامت دهیم. شما می توانید کدهای ری اکت را مستقیما درون کدهای html استعمال فرمائید.
یک فولدر html بسازید: فرمان ذیل بی آلایش‌ترین هیبت یک فولدر در html میباشد.
2. کتابخانه‌ی ری اکت را ایمپورت نمایید: این کتایخانه در دو پوشه .js تعریف و تمجید گردیده که یکی از برای ساخت‌و‌ساز کنندگان و دیگری برای بسط دهندگان میباشد.
این کد را در تگ هد html بایستی قرار دهید. کد آخری به صورت تحت می شود:
3. یک نگهدارنده برای مولفه‌ها بسازید: تا اینجای شغل متوجه شدید که مولفه یا این که کامپوننت در ری اکت چیست. درحال حاضر برای اینکه بتوانیم از این کامپوننت‌ها در اپ به کار گیری کنیم، بایستی برای آن ها یک نگهدارنده بسازیم. برای اینکار ما از یک تگ div در بدنه به کار گیری میکنیم.
4. تشکیل داد کامپوننت: اینک مجال تشکیل داد کامپوننت‌هاست. شما می بایست این مولفه‌ها را به طور کلاس بسازید. برای مثال:
class HelloClass extends React.Component
{
render()
{
return React.createElement(\'div\', null, \'React without npm\');
}
}
تابع React.createElement تابعی میباشد که به شما قابلیت و امکان ایجاد کرد المان‌ها در ری اکت را میدهد.
5. فراخوانی کامپوننت ری اکت: در مرحله‌ی پایان شما بایستی کامپوننت خویش را از باطن جاوا اسکریپت فراخوانی نمایید. تابع React.DOM.render() این فعالیت را برای شما جاری ساختن میدهد. در درون تابع دو آرگومان داریم که او‌لین کامپوننت را می‌سازد و دومی آرگومان، تابع را درون نگهدارنده‌ای که ساختیم برای رندر کردن قرار میدهد.
ReactDOM.render(
React.createElement(HelloClass, null, null),
document.getElementById(\'root\')
);
امر بی نقص تشکیل داد پوشه ری اکت را درپی مشاهده می کنید:
کافیست این کد را در یک فولدر متنی ذخیره کرده و روی مرورگر گشوده نمائید.
ری اکت برای اپ نویسی نرم افزار های تلفن همراه
ممکن میباشد چشم باشید که در دسته های مجازی مربوط به اپلیکیشن نویسی زمانی یک نفر درباره ی تعیین در میان ریکت، انگیولار و ویو پرسش می‌پرسد، یک فردی سفارش میکند که یادگرفتن react را دنبال نمایید. دلیلش هم این میباشد با آن هم میشود صفحه ها اینترنت طراحی کرد و هم نرم افزار های موبایلی اندروید و IOS.
اینجا می خواهم بگوییم که‌این سخن و واحد سنجش تماما خطا میباشد . زیرا تنها ریکت وجود ندارد که‌این امکان را به شما میدهد. شما بعداز یادگیری انگیولار و ویو هم میتوانید نرم افزار های موبایلی بنویسید.
همانطور که اگاهی دارید یک فریمورک وجود دارااست به اسم ریکت نیتیو. شاید ندانید که تفاوت React Native و react چیست. در کل React Native یکی‌از فریمورک های جاوا اسکریپت میباشد. شما می توانید به یاری ریکت نیتیو نرم افزار های موبایلی برای سیستم ادله های اندروید و IOS طراحی نمائید. ریکت نیتیو به قدری توانمند میباشد که توانسته سهم متعددی از بازار عمل نرم افزار های موبایلی را به خودش تخصیص بدهد و حریف های خودش مثل جاوا، کاتلین، سوئیفت و … را کمرنگ نماید. برای ثابت این داعیه کافیست خصوصی به وبسایت های استخدامی مثل کوئرا، جابینجا، استک اور فلو و … نرم افزار نویسا بزنید.