ری اکت در پشت پرده چگونه کار می کند؟

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

پروسه رندر که در بالا به آن اشاره کردیم در 3 مرحله اتفاق می افتد.

1- به ری اکت میگیم که کامپوننت ما رو رندر کن.(Triggering a render)

2- ری اکت شروع میکنه به رندر کردن کامپوننت ما.(Rendering the component)

3- تغییرات مورد نظر روی دام اصلی اعمال میشه.(Committing to the DOM)

حالا میخواهیم به طور مفصل به بررسی این 3 مورد در حالت های مختلف بپردازیم :

** ابتدا مرحله اول یعنی (Triggering a render) را مورد بررسی قرار می دهیم :

همانطور که اطلاع دارید در دو حالت زیر نیاز داریم تا به ری اکت بگیم که کامپوننت ما رو رندر کنه :

(فرض کنید کامپوننت والد مد نظر ما از چندین کامپوننت تو در تو تشکیل شده)

1- زمانی که برنامه برای اولین بار اجرا می شود.

2- زمانی که می خواهیم state کامپوننت مان (و یا یکی از فرزندانش) را تغییر دهیم.

در حالت اول این کار را با فراخوانی createRoot با گره DOM هدف، و سپس فراخوانی متد render آن با کامپوننت مورد نظرمان انجام می‌ دهیم:

import App from './App.js';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

در قطعه کد بالا اگر ()root.render را حذف کنید کامپوننت شما دیگر نمایش داده نمی شود.

در حالت دوم تابع معروف () setState را داخل کامپوننتی که نیاز داریم تا state اش تغییر کند (می تواند بسته به نیاز برنامه، خود کامپوننت والد و یا یکی از فرزندانش باشد.) فراخوانی میکنیم که این تابع خودش به
ری اکت میگه که کامپوننت ما نیاز به رندر داره و ما نیازی نیست کار خاصی انجام دهیم.

** حالا می رسیم به مهم ترین قسمت از پروسه رندر یا همون (Rendering the component) :

پس از اینکه به ری اکت فهموندیم که کدام کامپوننت مان نیاز به رندر داره، React کامپوننت مورد نظر ما رو فراخوانی می کنه تا بفهمه چه چیزی قراره روی صفحه نمایش نشون داده بشه. کانسپت "Rendering" در ری اکت به معنی فراخوانی کامپوننت ما توسط ری اکت هستش.

حال میخواهیم ببینیم در دو حالت زیر ری اکت چجوری کامپوننت ما رو رندر میکنه؟

(فرض کنید کامپوننت والد مد نظر ما از چندین کامپوننت تو در تو تشکیل شده)

1- زمانی که برنامه برای اولین بار اجرا می شود.

2- زمانی که state خود کامپوننت والد یا یکی از کامپوننت های داخلی تغییر می کند.

در حالت اول کامپوننت والد ما فراخوانی میشود.(تمام کامپوننت های تو در توی داخل آن نیز توسط ری اکت فراخوانی میشوند.)

در حالت دوم ری اکت کامپوننتی را که state آن تغییر کرده (متد setState در آن صدا زده شده) و همچنین کامپوننت های فرزند آن در صورت وجود را دوباره فراخوانی می کند .(چون یکبار توی حالت اول فراخوانی کرده.) سپس React محاسبه خواهد کرد که کدام مولفه های کامپوننت ذکر شده و یا کامپوننت های فرزند نسبت به فراخوانی قبلی (در اینجا مورد اول) تغییر کرده اند ولی تا مرحله بعد با آن ها کاری نخواهد داشت.

نکته :

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

به مثال زیر دقت کنید :

export default function Gallery() 
 return (
     <section>
       <h1>Inspiring Sculptures</h1>
       <Image />
     </section>  
    );
}

function Button() {
return (
   <button>Hello</button>
    );
}

function Image() {
return (
   <>
      <img
        src=&quothttps://i.imgur.com/ZF6s192.jpg&quot
        alt=&quotFloralis Genérica&quot
      />
      <Button/>
   </>
    );
}

در ابتدای اجرای برنامه ، React کامپوننت Gallery را فراخوانی میکند که فراخوانی این کامپوننت باعث فراخوانی کامپوننت Image و سپس فراخوانی کامپوننت Button میشود.

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

** حالا می رسیم به آخرین قسمت از پروسه رندر یا همون (Committing to the DOM) :

بعد از به پایان رسیدن فراخوانی های کامپوننت ها نوبت به مرحله دستکاری DOM اصلی می رسد.

که باز هم شامل دو حالت هست:

(فرض کنید کامپوننت والد مد نظر ما از چندین کامپوننت تو در تو تشکیل شده)

1- در ابتدای اجرای برنامه، React از متد ()appendChild برای قرار دادن تمام گره های DOM فرعی (که در مرحله اول حالت قبلی) ایجاد کرده روی صفحه نمایش (DOM اصلی) استفاده می کند.

2- هنگام تغییر state یکی از کامپوننت ها ، React حداقل عملیات لازم را اعمال می کند (محاسبه شده در مرحله دوم حالت قبلی!) تا DOM اصلی با آخرین خروجی رندر مطابقت داشته باشد.

نکته :ری اکت تنها در صورتی گره های DOM اصلی را تغییر میدهد که تفاوتی بین رندر ها وجود داشته باشد.

چیزهایی که نوشتم بر اساس داکیومنت جدید ری اکت هستش امیدوارم مفید بوده باشه براتون.