پشت صحنه اجرای کدهای React چه اتفاقی می‌افته؟🤔
وقتی یک کامپوننت React رو می‌نویسیم، مرورگر مستقیماً کد JSX ما رو اجرا نمی‌کنه
1⃣ ابتدا JSX چه میشه؟
کدی مثل:
function App() {
return <h1>Hello</h1>;
}
در ابتدا توسط ابزارهای مربوط به Build پردازش میشه و JSX به JavaScript تبدیل میشه
2⃣ مفهوم React Element
بعد از پردازش JSX، یک ساختار داده‌ای به نام React Element ایجاد میشه
این ساختار فقط توصیف می‌کنه که UI باید چه شکلی باشه
مثلاً به صورت مفهومی:
{
type: "h1",
props: {
children: "Hello"
}
}
📌 این Object خودش DOM واقعی نیست، فقط توصیفی از UI موردنظره
3⃣ مفهوم Virtual DOM
ری‌اکت برای مدیریت UI، یک نمایش از ساختار UI رو در حافظه نگه می‌داره که بهش معمولاً Virtual DOM گفته میشه
وقتی State یا Props تغییر می‌کنن، ری‌اکت خروجی جدید کامپوننت رو محاسبه می‌کنه
4⃣ مفهوم Reconciliation
بعد از ایجاد خروجی جدید، ری‌اکت وضعیت جدید رو با وضعیت قبلی مقایسه می‌کنه
به این فرآیند Reconciliation میگن
در این مرحله ری‌اکت بررسی می‌کنه کدوم قسمت‌های UI واقعاً تغییر کردن و نیاز به به‌روزرسانی دارن
5⃣ مفهوم Fiber
در معماری مدرن ری‌اکت، ساختار داخلی مهمی به نام Fiber وجود داره
فایبر به ری‌اکت اجازه می‌ده کارهای مربوط به رندرینگ رو به واحدهای کوچک‌تر تقسیم و مدیریت کنه
این معماری به ری‌اکت کمک می‌کنه کارهای مختلف رو بهتر زمان‌بندی و اولویت‌بندی کنه
6⃣ مفهوم Render Phase
در مرحله Render Phase، ری‌اکت کامپوننت‌ها رو اجرا می‌کنه تا مشخص بشه UI جدید باید چه شکلی باشه
مثلاً:
function Counter() {
return <h1>10</h1>;
}
در این مرحله بیشتر داریم UI جدید رو محاسبه می‌کنیم و هنوز الزاماً تغییری روی DOM واقعی ایجاد نشده
7⃣ مفهوم Commit Phase
بعد از اینکه ری‌اکت مشخص کرد چه تغییراتی لازمه، وارد مرحله Commit Phase میشه
در این مرحله تغییرات لازم روی DOM واقعی اعمال می‌شن
به صورت ساده:
Render
↓
Reconciliation
↓
Commit
↓
DOM Update
8⃣ بعد از تغییر DOM چه میشه؟
بعد از تغییر DOM، مرورگر باید صفحه رو دوباره پردازش کنه
به صورت ساده این مراحل اتفاق می‌افتن:
DOM
↓
Style Calculation
↓
Layout
↓
Paint
↓
Composite
در این مراحل مرورگر مشخص می‌کنه عناصر چه Styleای داشته باشن، کجا قرار بگیرن و چطور روی صفحه نمایش داده بشن
9⃣ مفهوم useEffect
یکی از اشتباهات رایج اینه که فکر کنیم "useEffect" هنگام Render اجرا میشه
در حالت معمول، Effectها بعد از Commit شدن تغییرات اجرا می‌شن
مثلاً:
useEffect(() => {
console.log("Effect");
}, []);
یعنی ابتدا React UI رو محاسبه می‌کنه و تغییرات لازم رو Commit می‌کنه، سپس Effect اجرا میشه
0⃣1⃣ وقتی State تغییر می‌کنه چه اتفاقی می‌افته؟
فرض کنیم این State رو داریم:
const [count, setCount] = useState(0);
وقتی این کد اجرا بشه:
setCount(count + 1);
تقریباً این مسیر اتفاق می‌افته:
State Update
↓
React Scheduling
↓
Render Phase
↓
Reconciliation
↓
Commit Phase
↓
DOM Update
↓
Browser Rendering
در نهایت کاربر UI جدید رو روی صفحه می‌بینه
📌 یک نکته مهم
ری‌اکت خودش باعث نمی‌شه DOM مرورگر جادویی سریع‌تر بشه
ری‌اکت بیشتر مدیریت تغییرات UI رو ساده‌تر می‌کنه و تصمیم می‌گیره چه تغییراتی باید روی DOM اعمال بشن
سرعت واقعی برنامه به چیزهای مختلفی مثل حجم JavaScript، تعداد Renderها، ساختار کامپوننت‌ها، اندازه DOM و هزینه‌ی Rendering مرورگر بستگی داره
🧠 جمع‌بندی
به طور خلاصه، وقتی یک State در React تغییر می‌کنه:
State Change
↓
Render
↓
Reconciliation
↓
Commit
↓
DOM Update
↓
Browser Rendering
↓
Pixels on Screen
📌 مفاهیم مهم پشت React:
React Element → توصیف UI
Virtual DOM → نمایش UI در حافظه
Reconciliation → پیدا کردن تفاوت‌های UI قبلی و جدید
Fiber → معماری داخلی برای مدیریت کارهای React
Render Phase → محاسبه UI جدید
Commit Phase → اعمال تغییرات روی DOM
Browser Rendering → تبدیل تغییرات DOM به چیزی که روی صفحه می‌بینیم
چیزی که ما فقط با یک "setState" می‌بینیم، پشت صحنه زنجیره‌ای از اتفاقاته
🔗 https://t.me/codetrailWeb
#Frontend