درک ساختار درختی

همان‌طور که پروژه React شما بزرگ‌تر می‌شود و کامپوننت‌های بیشتری را درون یکدیگر قرار می‌دهید (Nest می‌کنید)، یک سوال مهم پیش می‌آید: ری‌اکت چطور ساختار و چیدمان این همه کامپوننت را رهگیری می‌کند؟

ری‌اکت و بسیاری از کتابخانه‌های فرانت‌اند، ساختار ظاهر سایت (UI) را به صورت یک درخت (Tree) مدل‌سازی می‌کنند. نگاه کردن به اپلیکیشن در قالب یک درخت، به شما کمک می‌کند تا رابطه بین کامپوننت‌ها را عمیق‌تر درک کنید. این درک برای حل چالش‌های آینده مثل مدیریت وضعیت (State Management) و بهینه‌سازی عملکرد (Performance) حیاتی است.

چیزهایی که در این درس یاد می‌گیرید:

• ری‌اکت چطور ساختار کامپوننت‌های شما را «می‌بیند».

• درخت رندر (Render Tree) چیست و چه کاربردی دارد؟

• درخت وابستگی ماژول‌ها (Module Dependency Tree) چیست و چرا برای ما مهم است؟

ظاهر سایت در قالب یک درخت

درخت‌ها یک مدل سنتی و عالی برای نشان دادن «رابطه بین اشیاء» هستند. خود مرورگرها نیز برای مدل‌سازی کدهای ظاهر صفحه از درخت استفاده می‌کنند؛ حتماً نام DOM (برای HTML) و CSSOM (برای CSS) را شنیده‌اید.

ری‌اکت نیز دقیقاً مانند مرورگر، یک درخت از کامپوننت‌های شما می‌سازد تا بفهمد داده‌ها چطور در برنامه جریان دارند و چطور باید اندازه نهایی پروژه را بهینه کند.

۱. درخت رندر (The Render Tree)

یکی از بزرگ‌ترین ویژگی‌های کامپوننت‌ها، قابلیت ترکیب (Composition) آن‌هاست. وقتی کامپوننت‌ها را داخل هم می‌چینید، رابطه والد و فرزند (Parent and Child) شکل می‌گیرد. وقتی پروژه ری‌اکت شما اجرا می‌شود، تمام این روابط در قالب یک درخت به نام درخت رندر (Render Tree) ترسیم می‌شوند.

فرض کنید برنامه‌ای داریم که جملات انگیزشی نمایش می‌دهد. ساختار رندر آن به این صورت خواهد بود:

در این درخت، هر گره (Node) نماینده یک کامپوننت زنده است:

• گره ریشه (Root Node): بالاترین کامپوننت برنامه است (در اینجا کامپوننت App). این اولین کامپوننتی است که ری‌اکت رندر می‌کند.

• پیکان‌ها: مسیر حرکت را از کامپوننت والد به سمت کامپوننت فرزند نشان می‌دهند.

📘 چرا تگ‌های HTML در این درخت نیستند؟ درخت رندر ری‌اکت کاری با تگ‌های وب (<div> یا <h1>) ندارد. ری‌اکت یک فریم‌ورک مستقل از پلتفرم (Platform Agnostic) است. امروز کدهای شما را روی وب رندر می‌کند (با HTML)، اما فردا همین کدها می‌توانند روی موبایل (React Native) رندر شوند و تبدیل به UIView شوند. درخت رندر فقط معماری خود ری‌اکت را بررسی می‌کند.

پویایی درخت رندر در مواجهه با شروط

درخت رندر بر اساس داده‌های ورودی می‌تواند در هر ثانیه تغییر کند! اگر در برنامه از رندر مشروط استفاده کرده باشید، با تغییر شرط، فرزندان یک والد تغییر می‌کنند:

دو اصطلاح مهم در درخت رندر:

• کامپوننت‌های سطح بالا (Top-level Components): گره‌های نزدیک به ریشه هستند. این کامپوننت‌ها بیشترین پیچیدگی را دارند و هرگونه تغییر در آن‌ها، روی عملکرد رندر تمام کامپوننت‌های زیرمجموعه اثر می‌گذارد.

• کامپوننت‌های برگ (Leaf Components): کامپوننت‌های انتهای درخت هستند که هیچ فرزندی ندارند. این المان‌ها (مثل دکمه‌ها یا متن‌ها) معمولاً در طول کار با برنامه بارها و بارها بازخوانی (Re-render) می‌شوند.

۲. درخت وابستگی ماژول‌ها (The Module Dependency Tree)

رابطه دیگری که در یک برنامه ری‌اکت شکل می‌گیرد و می‌توان آن را با درخت نشان داد، وابستگی فایل‌ها و ماژول‌ها به یکدیگر است. وقتی کدهای خود را به فایل‌های مجزای جاوااسکریپتی تقسیم می‌کنید و از دستورات import و export استفاده می‌کنید، در حال ساختن این درخت هستید.

در این درخت، هر گره نشان‌دهنده یک فایل (Module) و هر شاخه نشان‌دهنده یک دستور import است:

تفاوت‌های اصلی درخت وابستگی با درخت رندر:

1. گره‌ها نشان‌دهنده فایل‌ها هستند، نه کامپوننت‌ها.

2. فایل‌های غیر کامپوننتی (مثل فایل‌های دیتای خام quotes.js یا توابع کمکی utils.js) نیز در این درخت حضور دارند.

3. در فایل App.js ما فایل Copyright.js را ایمپورت کرده‌ایم، پس در درخت وابستگی، کامپوننت Copyright زیرمجموعه مستقیم App است. اما در درخت رندر، از آنجا که Copyright به عنوان پروپِ children به داخل باکس انگیزشی فرستاده شده بود، فرزندِ InspirationGenerator شناخته می‌شد!

کاربرد درخت وابستگی چیست؟

وقتی می‌خواهید پروژه را برای انتشار روی اینترنت آماده کنید، ابزاری به نام باندلر (Bundler) مثل Webpack یا Vite وارد کار می‌شود. باندلر با نگاه کردن به این درخت، فایل ریشه (Entrypoint) را پیدا کرده و تمام فایل‌های متصل به آن را جمع‌آوری و مچاله می‌کند تا در قالب یک فایل نهایی و سبک (Bundle) به مرورگر کاربر بفرستد.

اگر حجم خروجی پروژه شما (Bundle Size) زیاد شود، دانلود سایت برای کاربر طول می‌کشد. بررسی درخت وابستگی به شما کمک می‌کند بفهمید کدام فایل‌ها حجم اضافه میاورند یا کدام کدها بدون استفاده (Dead Code) در پروژه رها شده‌اند.

خلاصه نکات کلیدی (Recap)

• مدل‌سازی ظاهر برنامه به صورت درخت، پایه و اساس درک معماری React است.

• درخت رندر (Render Tree): ساختار تودرتوی کامپوننت‌ها را در یک رندر واقعی نشان می‌دهد و با شروط برنامه تغییر می‌کند. شناخت اجزای آن برای بهینه‌سازی سرعت برنامه (Performance) الزامی است.

• درخت وابستگی (Dependency Tree): روابط بین فایل‌ها و ایمپورت‌ها را نشان می‌دهد. ابزارهای ساخت پروژه (Build Tools) از این درخت برای بسته‌بندی کدهای نهایی استفاده می‌کنند. شناخت آن برای کاهش حجم نهایی سایت مفید است.