Render، Re-render و Commit

Render، Re-render و Commit: سه مرحله‌ای که هر به‌روزرسانی از آن‌ها می‌گذرد

در طول این دوره، بارها از کلمه «رندر» استفاده کردیم، بدون اینکه دقیقاً مراحل داخلی آن را باز کنیم. از این فصل به بعد، به مدل رندرینگ React با جزئیات کامل می‌پردازیم. در این درس اول، سه واژه کلیدی را از هم جدا می‌کنیم: Render، Re-render و Commit.

Render: محاسبه اینکه رابط کاربری باید چه شکلی باشد

Render یعنی React تابع کامپوننت شما را اجرا می‌کند تا ببیند خروجی JSX آن، بر اساس State و Props فعلی، چیست. این مرحله فقط یک محاسبه است؛ نتیجه‌اش توصیفی از رابط کاربری است، نه خود تغییر واقعی روی صفحه.

function Greeting({ name }) {
  console.log("در حال محاسبه خروجی");
  return <h2>سلام {name}</h2>;
}

اجرای این تابع، همان Render است. تا اینجا هیچ چیزی در DOM واقعی تغییر نکرده است.

Re-render: تکرار همین محاسبه

اولین باری که یک کامپوننت رندر می‌شود، به آن Mount گفته می‌شود؛ همان چیزی که در فصل ششم دیدیم. هر بار بعدی که همان تابع دوباره اجرا می‌شود، معمولاً به‌خاطر تغییر State یا Props، به آن Re-render می‌گویند. خود کلمه «رندر» گاهی به‌جای هر دوی این حالت‌ها استفاده می‌شود؛ Re-render فقط تأکید می‌کند که کامپوننت از قبل روی صفحه بوده است.

Commit: اعمال تغییر روی DOM واقعی

پس از اینکه React خروجی جدید را محاسبه کرد، باید تصمیم بگیرد این خروجی جدید با آنچه قبلاً در DOM بوده چه تفاوتی دارد و فقط همان تفاوت را روی DOM واقعی اعمال کند. این مرحله دوم، Commit نام دارد.

یک نکته مهم این است که Commit همیشه به معنای تغییر واقعی در صفحه نیست. اگر خروجی محاسبه‌شده در مرحله Render دقیقاً همان چیزی باشد که قبلاً روی صفحه بوده، React می‌تواند در Commit هیچ تغییری روی DOM اعمال نکند؛ حتی اگر خود تابع کامپوننت دوباره اجرا شده باشد.

چرا این تفکیک اهمیت دارد

این تفکیک توضیح می‌دهد که چرا Effectها، همان‌طور که در فصل ششم دیدیم، بعد از Commit اجرا می‌شوند، نه در حین محاسبه JSX: چون Effect باید مطمئن باشد DOM واقعی به‌روز شده است، نه فقط اینکه خروجی جدید محاسبه شده باشد. همچنین توضیح می‌دهد چرا خواندن یک عنصر DOM از طریق Ref، در حین Render همیشه معتبر نیست؛ چون در آن لحظه، هنوز Commit انجام نشده است.

یک تصویر خلاصه از ترتیب مراحل

۱. رویدادی رخ می‌دهد (کلیک، تغییر داده و ...)
۲. React State مرتبط را به‌روزرسانی می‌کند
۳. مرحله Render: تابع کامپوننت (و فرزندانش) دوباره اجرا می‌شود
۴. React خروجی جدید را با خروجی قبلی مقایسه می‌کند
۵. مرحله Commit: فقط تفاوت‌ها در DOM واقعی اعمال می‌شوند
۶. Effectهای مرتبط، پس از Commit، اجرا می‌شوند

Render همیشه به معنای تغییر دیدنی نیست

یک سوءبرداشت رایج این است که تصور کنیم هر Re-render، یعنی چیزی روی صفحه عوض شده. اما Render فقط یک محاسبه داخلی است؛ ممکن است کامپوننتی چند بار Render شود، بدون اینکه کاربر هیچ تغییری در ظاهر صفحه ببیند. جزئیات دقیق‌تر اینکه چه چیزی باعث این محاسبه‌های اضافه می‌شود، در درس‌های بعدی همین فصل بررسی می‌شود.

مثال قابل اجرا

در این مثال، هر بار که دکمه کلیک می‌شود، تابع کامپوننت دوباره اجرا (Render) می‌شود؛ کنسول را باز کنید تا این محاسبه را جدا از تغییر واقعی روی صفحه ببینید.

مشاهده لحظه Render در کنسول

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  console.log("تابع کامپوننت در حال اجراست (Render)");

  return (
    <div>
      <p>عدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

Render یعنی اجرای تابع کامپوننت برای محاسبه خروجی JSX جدید؛ Re-render همان کار برای کامپوننتی است که قبلاً روی صفحه بوده؛ و Commit مرحله‌ای جداست که در آن، فقط تفاوت واقعی بین خروجی قدیم و جدید، در DOM اعمال می‌شود. این تفکیک، پایه فهم درست رفتار Effectها و Refها است. در درس بعدی، جزئیات دقیق‌تر خود Render Phase و Commit Phase را بررسی می‌کنیم.

Render، Re-render و Commit