رندر و کامیت

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

1. فراخوانی یک رندر (رساندن سفارش مشتری به اشپزخانه)
2. رندر کردن کامپوننت (اماده کردن سفارش در اشپزخانه)
3. رساندن به دام (گذاشتن سفارش روی میز)

قدم اول: فراخوانی یک رندر

دو دلیل برای یک کامپوننت برای رندر هست:

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

رندر اولیه

هنگامی که برنامه‌ی شما شروع به اجرا می‌شود، شما باید فرآیند رندر اولیه را آغاز کنید. گاهی اوقات چارچوب‌ها و محیط‌های ماسباکس این کد را پنهان می‌کنند، اما این کار با فراخوانی createRoot با گره DOM هدف انجام می‌شود، سپس با فراخوانی متد render آن با کامپوننت شما:

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

با امتحان کردن کد فراخوانی root.render() را کامنت کنید و تغییرات را مشاهده کنید!

دوباره رندر شدن زمانی که حالت تغییر می‌کند

پس از اینکه کامپوننت ابتدایی رندر شده است، می‌توانید با به‌روزرسانی وضعیت آن با استفاده از تابع set رندرهای بیشتری را فراخوانی کنید. به‌روزرسانی وضعیت کامپوننت شما به‌صورت خودکار یک رندر را در صف قرار می‌دهد. (می‌توانید این را تصور کنید که یک مشتری رستوران پس از سفارش اول، به تبلیغ چای، دسر و انواع دیگر از چیزها علاقه دارد، به تبع وضعیت تشنگی یا گرسنگی خود.)

 قدم دوم: ری‌اکت کامپوننت شما را دوباره رندر میکند

پس از اینکه یک رندر فراخوانی می‌شود، ری‌اکت کامپوننت‌های شما را فراخوانی می‌کند تا بفهمد چه چیزی باید در صفحه نمایش داده شود. “رندر کردن” به معنای فراخوانی React از کامپوننت‌های شما است.

• در رندر اولیه، ری‌اکت کامپوننت ریشه را فراخوانی می‌کند.
• برای رندرهای بعدی، ری‌اکت تابع کامپوننت را فراخوانی می‌کند که به‌روزرسانی وضعیت آن رندر را آغاز کرده است.

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

در مثال زیر، ری‌اکت چند بار Gallery() و Image() را فراخوانی می‌کند:

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

function Image() {
  return (
    <img
      src="https://i.imgur.com/ZF6s192.jpg"
      alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
    />
  );
}

• در رندر اولیه، ری‌اکت گره‌های DOM برای <section>، <h1> و سه تگ <img> ایجاد می‌کند.
• در یک رندر مجدد، ری‌اکت محاسبه می‌کند که ویژگی‌های آن‌ها، اگر هرکدام تغییر کرده باشد، از زمان رندر قبلی چه تغییراتی کرده‌اند. این اطلاعات را تا مرحلهٔ بعد، یعنی مرحلهٔ commit، استفاده نخواهد کرد.

Deep Dive

بهینه‌سازی عملکرد

Show Details

رفتار پیش‌فرض که همه کامپوننت‌های تو در تو درون کامپوننت به‌روزرسانی‌شده را رندر می‌کند، اگر کامپوننت به‌روزرسانی‌شده در ارتفاع درخت بسیار بالا باشد، به لحاظ عملکرد بهینه نیست. اگر به یک مشکل عملکرد برخورد کردید، چندین راه برای حل آن در بخش عملکرد توصیف شده‌اند. پیش بهینه‌سازی نکنید تا زمانی که ضروری نشده باشد!

قدم سوم: ری‌اکت تغییرات را در دام اعمال می‌کند

پس از رندر (فراخوانی) کامپوننت‌های شما، ری اکت DOM را تغییر می‌دهد.

• برای رندر اولیه، ری اکت از API DOM appendChild() برای قرار دادن تمام گره‌های DOMی که ایجاد کرده است روی صفحه نمایش استفاده می‌کند.
• برای رندرهای مجدد، ری اکت عملیات ضروری حداقل را (هنگام رندر!) اجرا می‌کند تا DOM با آخرین خروجی رندرینگ هماهنگ شود.

React تنها زمانی گره‌های DOM را تغییر می‌دهد که تفاوتی بین رندرها وجود داشته باشد. به عنوان مثال، در زیر یک کامپوننت است که هر ثانیه با ویژگی‌های مختلف از والدینش دوباره رندر می‌شود. توجه کنید چگونه می‌توانید متنی را به <input> اضافه کنید و مقدار آن را به‌روزرسانی کنید، اما متن وقتی که کامپوننت دوباره رندر می‌شود ناپدید نمی‌شود:

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

این کار به این دلیل کار می‌کند که در این مرحله آخر، React تنها محتوای <h1> را با time جدید به‌روزرسانی می‌کند. این می‌بیند که <input> در JSX در همان مکانی که قبلاً بوده است ظاهر شده است، بنابراین React به <input> - یا value آن - دست نمی‌زند!

ختام: نقاشی مرورگر

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

Recap

• هر به‌روزرسانی صفحه در یک اپلیکیشن React در سه مرحله انجام می‌شود:
  1. فعال کردن
  2. رندر
  3. Commit
• می‌توانید از حالت دقیق استفاده کنید تا اشتباهات در کامپوننت‌های خود را پیدا کنید.
• اگر نتیجه رندرینگ همانند زمان گذشته باشد، React به DOM دست نمی‌زند.