درک UI به صورت درخت در React

1. رابط کاربری به صورت درخت
2. درخت رندر
   1. تگ‌های HTML در درخت رندر کجا هستند؟
3. درخت وابستگی ماژول
4. جمع بندی

برنامه React با انبوهی از کامپوننت های تو در تو شکل می گیرد. ولی سوال این است که React چگونه ساختار کامپوننت های برنامه شما را دنبال می‌کند؟

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

رابط کاربری به صورت درخت

درخت‌ها مدلی ارتباطی بین آیتم ها هستند و رابط کاربری اغلب با استفاده از ساختارهای درختی نمایش داده می‌شود. به‌عنوان مثال، مرورگرها از ساختارهای درختی برای مدل‌سازی HTML (DOM) و CSS (CSSOM) استفاده می‌کنند. پلتفرم‌های موبایل نیز از درخت‌ها برای نمایش سلسله مراتب نمای خود استفاده می‌کنند.

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

درخت رندر

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

هنگامی که یک برنامه React را رندر می‌کنیم، می‌توانیم این ارتباط را به صورت درخت مدل‌سازی کنیم که به آن درخت رندر گفته می‌شود.

در لینک زیر یک برنامه React که جملات الهام‌بخش را نمایش می دهد را می توانید مشاهده کنید.

مشاهده کد در CodeSandbox

در این مثال، درخت رندری که در تصویر نمایش داده را می توانیم بسازیم.

این درخت از گره‌هایی تشکیل شده است که هر کدام نمایانگر یک کامپوننت هستند. از جمله گره‌های App، FancyText و Copyright که درخت ما را تشکیل می‌دهند.

گره ریشه در درخت رندر React، کامپوننت ریشه برنامه است. در این مورد، کامپوننت ریشه App است و این نخستین کامپوننتی است که React آن را رندر می‌کند. هر فلش در درخت از کامپوننت والد به کامپوننت فرزند اشاره می‌کند.

تگ‌های HTML در درخت رندر کجا هستند؟

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

ری اکت به‌عنوان یک فریمورک رابط کاربری، مستقل از پلتفرم است. تمام مثال های ارائه شده در این مستندات در وب رندر می‌شوند، و از HTML به عنوان عناصر اولیه رابط کاربری خود استفاده می‌کنند. اما برنامه React براحتی می‌تواند در یک پلتفرم موبایل یا دسکتاپ نیز رندر شود که ممکن است از عناصر رابط کاربری متفاوتی مانند UIView یا FrameworkElement استفاده کند.

این عناصر اولیه رابط کاربری پلتفرمها، کامپوننت React نیستند. درخت‌های رندر React می‌توانند بینشی سوای از وابستگی های پلتفرمی نسبت به برنامه React ما بدهند.

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

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

برای مشاهده کامل کد و نتیجه در CodeSandbox کلیک کنید

      export default function FancyText({title, text}) {
  return title
    ? <h1 className='fancy title'>{text}</h1>
    : <h3 className='fancy cursive'>{text}</h3>
}
    

در این مثال، بسته به اینکه inspiration.type چه باشد، ممکن است <FancyText> یا <Color> را رندر کنیم. درخت رندر ممکن است در هر بار رندر متفاوت باشد.

اگرچه درخت‌های رندر ممکن است در مراحل رندر متفاوت باشند، اما این درخت‌ها به‌طور کلی برای شناسایی اینکه کامپوننت های سطح‌بالا و کامپوننت های برگ در برنامه کدامند، مفید است. کامپوننت های سطح‌بالا، کامپوننت هایی هستند که به نزدیک‌ترین کامپوننت ریشه متصل هستند و بر عملکرد رندر تمام کامپوننت های زیرین تأثیر می‌گذارند و معمولاً شامل پیچیدگی بیشتری هستند. کامپوننت های برگ در پایین درخت قرار دارند و هیچ کامپوننت فرزندی ندارند و معمولاً به‌طور مکرر رندر می‌شوند.

شناسایی این دسته‌بندی‌های کامپوننت ها برای درک جریان داده و عملکرد برنامه شما مفید است.

درخت وابستگی ماژول

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

هر گره در درخت وابستگی ماژول یک ماژول است و هر شاخه نمایانگر یک دستور import در آن ماژول است.

اگر برنامه جملات الهام بخش را در نظر بگیریم، می‌توانیم درخت وابستگی ماژول یا بخ اختصار درخت وابستگی را به صورت زیر بسازیم.

گره ریشه درخت، یا ماژول ریشه، همان فایل ورودی یا نقطه شروع است. این گره معمولاً ماژولی است که شامل کامپوننت ریشه است.

در مقایسه با درخت رندر، این دو درخت ساختارهای مشابهی دارند اما درخت وابستگی تفاوتهایی نیز با درخت رندر دارد:

• گره‌هایی که ساختار درخت را تشکیل می‌دهند نمایانگر ماژول‌ها هستند، نه کامپوننت ها.
• ماژول‌های غیر کامپوننتی، مانند inspirations.js، نیز در این درخت نمایان می‌شوند. اما درخت رندر فقط شامل کامپوننت ها است.
• Copyright.js زیر App.js قرار دارد اما در درخت رندر، کامپوننت Copyright، به‌عنوان یک کامپوننت فرزند کامپوننت InspirationGenerator ظاهر می‌شود. این به این دلیل است که InspirationGenerator کامپوننت Copyright را بعنوان فرزند دریافت می کند، بنابراین Copyright را به‌عنوان یک کامپوننت فرزند رندر می‌کند اما ماژول را مستقمن ایمپورت نمی‌کند.

درخت وابستگی برای تعیین اینکه کدام ماژول‌ها برای اجرای برنامه React شما لازم هستند، مفید است. هنگامی که یک برنامه React را برای محیط عملیاتی بیلد می کنید، معمولاً مرحله ساختی وجود دارد که تمام جاوا اسکریپت لازم را برای ارسال به کلاینت، باندل می‌کند. ابزاری که مسئول این کار است bundler نامیده می‌شود و bundler‌ها از درخت وابستگی برای تعیین اینکه کدام ماژول‌ها باید درون باندل آورده شوند استفاده می‌کنند.

با رشد برنامه شما، معمولاً اندازه باندل نیز افزایش می‌یابد. اندازه باندل بزرگ برای انلود و اجرا در کلاینت هزینه‌بر است. اندازه باندل بزرگ می‌تواند زمان رندر رابط کاربری شما را به تأخیر بیندازد. درک درخت وابستگی برنامه شما ممکن است به عیب‌یابی این مشکلات کمک کند.

جمع بندی

• درخت‌ها یک راه مرسوم برای نمایش ارتباط بین موجودیت‌ها هستند. آن‌ها اغلب برای مدل‌سازی رابط کاربری مورد استفاده قرار می‌گیرند.
• درخت‌های رندر، رابطه تو در تو بین کامپوننت های React را در یک رندر واحد نمایش میدهند.
• با رندر شرطی، درخت رندر ممکن است در رندرهای مختلف تغییر کند. با مقادیر پراپ مختلف، کامپوننت ها ممکن است کامپوننت های فرزند متفاوتی را رندر کنند.
• درخت‌های رندر به شناسایی کامپوننت های سطح‌بالا و کامپوننت های برگ کمک می‌کنند. کامپوننت های سطح‌بالا بر عملکرد رندر همه کامپوننت های زیرین تأثیر می‌گذارند و کامپوننت های برگ معمولاً به‌طور مکرر رندر می‌شوند. شناسایی آن‌ها برای فهم و عیب‌یابی عملکرد رندر مفید است.
• درخت های وابستگی نمایانگر وابستگی‌های ماژول ها به یکدیگر در برنامه React هستند.
• درختهای وابستگی توسط ابزارهای ساخت برای باندل کردن کدهای لازم برای ارسال یک برنامه به کلاینت استفاده می‌شوند.
• درخت‌های وابستگی برای عیب‌یابی اندازه باندل بزرگ که زمان نمایش در مرورگر، رندر را کند می‌کنند و فرصت‌هایی برای بهینه‌سازی کد باندل شده را نمایان می‌کنند، مفید هستند.