ReactJS Components چیست؟

19 تیر, 1402

بدون دیدگاه

Component یکی از بلوک های اصلی React است. به عبارت دیگر می توان گفت که هر اپلیکیشنی که در React توسعه می دهید از قطعاتی به نام کامپوننت تشکیل شده است. کامپوننت ها کار ساخت رابط های کاربری را بسیار ساده تر می کنند. شما می توانید یک UI را به چند بخش جداگانه به نام کامپوننت تقسیم کنید و به طور مستقل روی آنها کار کنید و همه آنها را در یک جزء والد که UI نهایی شما خواهد بود ادغام کنید.

می توانید در تصویر زیر مشاهده کنید که ما UI صفحه اصلی GeeksforGeeks را به اجزای جداگانه تقسیم کرده ایم.

جستجوی سفارشی گوگل در بالا را می توان به عنوان یک مؤلفه جداگانه مشاهده کرد، نوار پیمایش را می توان به عنوان یک مؤلفه جداگانه مشاهده کرد، نوار کناری یک مؤلفه فردی است، فهرست مقالات یا پست ها نیز یک مؤلفه فردی است و در نهایت، می توانیم همه را ادغام کنیم. از این مؤلفه‌های مجزا برای ایجاد یک مؤلفه والد که رابط کاربری نهایی برای صفحه اصلی خواهد بود.
اجزای موجود در React اساساً یک قطعه کد JSX را برمی‌گردانند که می‌گوید چه چیزی باید روی صفحه نمایش داده شود. در React، ما عمدتاً دو نوع مؤلفه داریم:

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

اجزای کلاس: اجزای کلاس کمی پیچیده تر از اجزای عملکردی هستند. مؤلفه های عملکردی از سایر مؤلفه های برنامه شما آگاه نیستند در حالی که مؤلفه های کلاس می توانند با یکدیگر کار کنند. ما می توانیم داده ها را از یک جزء کلاس به جزء کلاس دیگر منتقل کنیم. ما می توانیم از کلاس های JavaScript ES6 برای ایجاد کامپوننت های مبتنی بر کلاس در React استفاده کنیم. مثال زیر یک جزء معتبر مبتنی بر کلاس را در React نشان می دهد:

class Democomponent extends React.Component {
    render() {
        return <h1>Welcome Message!</h1>;
    }
}

اجزایی که در مثال بالا ایجاد کردیم معادل هستند و همچنین تفاوت اساسی بین یک جزء تابعی و یک جزء کلاسی را بیان کردیم. در آموزش های بعدی با ویژگی های بیشتر اجزای کلاس محور آشنا خواهیم شد. در حال حاضر، به خاطر داشته باشید که ما از اجزای عملکردی تنها زمانی استفاده خواهیم کرد که مطمئن باشیم مؤلفه ما نیازی به تعامل یا کار با هیچ مؤلفه دیگری ندارد. یعنی این مؤلفه‌ها به داده‌های سایر مؤلفه‌ها نیاز ندارند، اما می‌توانیم مؤلفه‌های عملکردی متعددی را تحت یک مؤلفه عملکردی واحد ترکیب کنیم. ما همچنین می‌توانیم از مؤلفه‌های مبتنی بر کلاس برای این منظور استفاده کنیم، اما توصیه نمی‌شود، زیرا استفاده از مؤلفه‌های مبتنی بر کلاس بدون نیاز، برنامه شما را ناکارآمد می‌کند.
در این پست، ما عمدتاً مؤلفه های کاربردی را می نویسیم تا درک مطلب را آسان تر کنیم. بعداً در آموزش اجزای کلاس محور را به تفصیل مورد بحث قرار خواهیم داد.

Rendering Components: در پست قبلی ما در مورد رندر عناصر در React دیدیم که چگونه عناصر اولیه با تگ های DOM با استفاده از متد ReactDOM.render () رندر می شوند. React همچنین قادر به رندر کردن اجزای تعریف شده توسط کاربر است. برای رندر کردن یک کامپوننت در React می‌توانیم یک عنصر را با یک کامپوننت تعریف‌شده توسط کاربر مقداردهی اولیه کنیم و این عنصر را به‌عنوان پارامتر اول به ReactDOM.render() منتقل کنیم یا مستقیماً جزء را به عنوان اولین آرگومان به متد ReactDOM.render () ارسال کنیم.

کد زیر نحوه مقداردهی اولیه یک جزء به یک عنصر را نشان می دهد:

const elementName = <ComponentName />;

در نحو بالا، ComponentName نام جزء تعریف شده توسط کاربر است.
نکته: نام یک جزء باید همیشه با حرف بزرگ شروع شود. این کار برای متمایز کردن یک تگ جزء از تگ های HTML انجام می شود.

مثال زیر کامپوننتی به نام Welcome to the Screen را ارائه می دهد:

فایل index.js خود را از دایرکتوری پروژه خود باز کنید و تغییرات زیر را اعمال کنید:

import React from 'react';

import ReactDOM from 'react-dom';

// This is a functional component

const Welcome = () => {

return <h1>Hello World!</h1>

}

ReactDOM.render(

<Welcome />,

document.getElementById("root")

);

اجازه دهید به صورت مرحله ای ببینیم که در مثال بالا چه اتفاقی می افتد:

ما ReactDOM.render() را به عنوان اولین پارامتر فراخوانی می کنیم.
React سپس مؤلفه Welcome را فراخوانی می کند که <h1>Hello World!</h1> را برمی گرداند. در نتیجه.
سپس ReactDOM به طور موثر DOM را به روز می کند تا با عنصر برگشتی مطابقت داشته باشد و آن عنصر را با شناسه به عنوان "ریشه" به عنصر DOM تبدیل می کند.