کامپوننت ها در ری اکت ؛ ابزارهای قدرتمند و ساده برای توسعه در React

نوشته شده توسط: تیم فنی نیک آموز

تاریخ انتشار: ۱۹ تیر ۱۴۰۳

آخرین بروزرسانی: ۲۰ تیر ۱۴۰۳

زمان مطالعه: 12 دقیقه

کامپوننت ها در ری اکت اجزای کوچکی از برنامه هستند که قابلیت گسترش و مدیریت آن را بهبود می‌دهند. «ReactJS» که با نام «React» هم شناخته می‌شود، یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط‌های کاربری (UI) وب‌سایت است. طرح‌های UI در ری اکت به‌شکل کامپوننت (Component) ساخته می‌شوند؛ روشی که می‌توان با کمک آن، هرطرح اصلی UI را به اجزای کوچک‌تر و مستقل تقسیم کرد. در این حالت، هر جزء می‌تواند حالت و ویژگی‌های خاص خود را داشته باشد. در این مقاله، به جزئیات کامپوننت ها در React بیشتر می‌پردازیم و درباره مباحثی مانند مفهوم و انواع آن‌ها، ساختار و… ، اطلاعات کاملی را در اختیارتان قرار خواهیم داد.

مفهوم کامپوننت‌ ها در ری‌ اکت

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

انواع کامپوننت‌ ها در ری‌ اکت

انواع کامپوننت ها در ری اکت ، به دو نوع تقسیم می‌شوند؛ کامپوننت‌های تابعی و کامپوننت‌های کلاسی که در ادامه، آن‌ها را تشریح خواهیم کرد.

Function Component

کامپوننت‌‌های تابعی در ری اکت ، درست مانند توابع جاوا اسکریپت هستند که خصوصیات (Properties) را می‌پذیرند و یک المان React را برمی‌گردانند.

نامناسب برای:

کامپوننت‌هایی که نیازی به تعامل با سایر کامپوننت‌ ها در ری اکت ندارند.
نیازی به مدیریت وضعیت‌های پیچیده (Complex States) نیست.

مناسب برای:

ارائه المان‌های استاتیک در UI
ترکیب چند مؤلفه ساده با یکدیگر و ساخت یک کامپوننت والد در حالت ایده‌آل

ما می‌توانیم با نوشتن یک تابع جاوا اسکریپت، کامپوننت تابعی در React ایجاد کنیم. این توابع می‌توانند با پارامتر یا فاقد آن باشند.

کد زیر، ساخت یک کامپوننت Function را در React را نشان می‌دهد:

function demoComponent() {
   return (<h1>
               Welcome Message!
           </h1>);
}

در جدول زیر، مثالی از ساخت کامپوننت تابعی با نام «Welcome» را در جاوا اسکریپت می‌بینید:

function welcome() {
    return <h1>Hello, Welcome to GeeksforGeeks!</h1>;
}

Class Components

کامپوننت‌های کلاسی در ری اکت ، کمی پیچیده‌تر از Function Components هستند. یک Class Component می‌تواند وراثت و دسترسی به داده‌های اجزای دیگر را نشان دهد. همچنین می‌توانند مانند Function Components عمل کنند؛ اما به‌طور معمول، در مقایسه با این نوع کامپوننت‌ها کارایی کمتری دارند. بنابراین، توصیه می‌شود که از Class Components برای کاربردهای عمومی استفاده نشود.

نامناسب برای:

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

مناسب برای:

مشخص‌کردن Error Boundaries در ری اکت
دسترسی به وضعیت و خصوصیات قبلی

برای جابه‌جایی داده‌ها از یک کامپوننت کلاسی به کامپوننت کلاسی دیگر، باید از «extends React.Component» استفاده کنیم.

برای ساخت یک Class Component در ری اکت، می‌توانیم از کلاس‌های JavaScript ES6 در React استفاده کنیم. کد زیر، نحوه انجام این قابلیت را نشان می‌دهد:

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

با نوشتن دستور زیر در محیط توسعه جاوا اسکریپت، می‌توانیم یک کامپوننت کلاسی در ری اکت با نام «Welcome» ایجاد کنیم.

class Welcome extends Component {
    render() {
        return <h1>Hello, Welcome to GeeksforGeeks!</h1>;
    }
}

مفهوم چرخه حیات کامپوننت‌ ها در ری اکت

کامپوننت ها در ری اکت دارای یک چرخه حیات (Lifecycle) هستند و می‌توانیم در طول سه فاز اصلی، روی آن‌ها نظارت کرده و متناسب‌با نیازهای جدید تغییر دهیم. در ادامه این بخش، هر سه فاز را با توضیحات مختصر ارائه داده‌ایم.

وصل کردن کامپوننت

وصل کردن کامپوننت یا «Mounting» به‌معنای قراردادن المان‌های UI در DOM است.

React دارای چهار متد داخلی است که هنگام اتصال کامپوننت به این ترتیب فراخوانی می‌شوند:

()constructor: این متد پیش از هرچیزی در جریان Mounting فراخوانی می‌شود. constructor مکان ابتدایی برای تنظیم وضعیت و سایر مقادیر اولیه است.
()getDerivedStateFromProps: این متد درست قبل از رندر کردن المان‌ها، در DOM فراخوانی می‌شود. بنابراین، آن را اولین محل برای تنظیم شی وضعیت براساس خصوصیات اولیه می‌دانیم.
()render: این متد، روشی است که خروجی HTML را به DOM می‌فرستد.
()componentDidMount: این متد پس از رندر شدن کامپوننت فراخوانی می‌شود. componentDidMount جایی است که توسعه‌دهنده، دستوراتی را اجرا می‌کند که مستلزم حضور کامپوننت در DOM هستند.

به روزرسانی کامپوننت

هرگاه تغییری در وضعیت یا خصوصیات کامپوننت‌ها ایجاد شود، یک به‌روزرسانی یا «Updating» در آن‌ها رخ می‌دهد.

React دارای پنج متد داخلی است که با به‌روزرسانی یک کامپوننت به این ترتیب فراخوانی می‌شوند:

()getDerivedStateFromProps: اولین متدی که در فاز دوم چرخه حیات کامپوننت ها در ری اکت اجرا می‌شود، getDerivedStateFromProps است. با آن می‌توانیم شی وضعیت را براساس خصوصیات اولیه بسازیم.
()shouldComponentUpdate: در متد shouldComponentUpdate می‌توانیم یک مقدار Boolean برگردانیم و این مقدار مشخص می‌کند که ری اکت می‌تواند وارد فاز بعدی شود یا خیر.
()render: وظیفه این متد، بازگرداندن مجدد HTML با تغییرات جدید به DOM است.
()getSnapshotBeforeUpdate: با کمک متد getSnapshotBeforeUpdate ، به خصوصیات و وضعیت‌های قبل از به‌روزرسانی دسترسی داریم؛ یعنی حتی پس از به‌روزرسانی کامپوننت، می‌توانیم مقادیر قبل از فاز Update را بررسی کنیم.
componentDidUpdate(): متد componentDidUpdate پس از به‌روزرسانی کامپوننت در DOM فراخوانی می‌شود.

جداسازی کامپوننت از سایر بخش ها

جداسازی یا «Unmounting» در ری اکت، باعث حذف کامپوننت از DOM می‌شود. برای این کار، React فقط یک متد داخلی دارد که با جداسازی کامپوننت فراخوانی می‌شود:

()componentWillUnmount: این متد زمانی فراخوانی می‌شود که کامپوننت درحال حذف از DOM باشد.

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

کامپوننت‌های قابل استفاده مجدد یا «Reusable Components» ، تکه‌کدهایی هستند که می‌توانند بارها در سراسر وب‌سایت یا وب‌اپلیکیشن استفاده شوند. این کامپوننت ها در ری اکت ، هرچیزی را شامل می‌شوند؛ از دکمه‌های ساده گرفته تا اشکال پیچیده. هدف از به‌کارگرفتن این نوع Component ها، صرفه‌جویی در زمان و فرآیند توسعه است.

کاربرد:

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

کامپوننت‌ های کودک و کامپوزیشن در ری اکت

در React ، کامپوننت‌ های کودک (Child Components) و کامپوزیشن (Composition Components)، مفاهیم کلیدی برای ایجاد رابط‌های کاربری پیچیده با ترکیب اجزای کوچک‌تر و قابل استفاده مجدد هستند. در ادامه، هرکدام را به‌شکل دقیق‌تری توضیح خواهیم داد.

کامپوننت های کودک در ری اکت

این کامپوننت‌ها درون کامپوننت‌های دیگر به‌شکل تودرتو قرار می‌گیرند و یک ساختار سلسله‌مراتبی ایجاد می‌کنند. Components کودک به‌عنوان اجزایی در کامپوننت والد شناخته می‌شوند. ویژگی‌های Child Components در ری اکت شامل موارد زیر است:

کامپوننت‌های کودک، عملکرد زمینه را از والدین خود به ارث می‌برند؛ زمینه‌هایی مانند دسترسی به وضعیت والد و خصوصیات آن.
این کامپوننت‌ها به‌طور معمول برای نمایش المان‌های UI کوچک‌تر و قابل استفاده مجدد به‌کار می‌روند و می‌توانند برای ساختن رابط‌های کاربری پیچیده‌تر، با والد خود ترکیب شوند.

کامپوننت های کامپوزیشن در ری اکت

Composition یک مفهوم اساسی در React است که شامل ساخت UI های پیچیده با ترکیب کامپوننت‌های ساده‌تر و قابل استفاده مجدد است. ویژگی‌هایی که این کامپوننت دارد را در لیست زیر نوشته‌ایم:

کامپوننتی که محتوای دلخواه را از اجزای فرزند خود می‌پذیرد.
سپس این محتوا در JSX والد با استفاده از props.children ارائه می‌شود.

مدیریت وضعیت در کامپوننت‌ های ری اکت

وضعیت یا (State) در React نمونه‌ای از کامپوننت های کلاسی است. این State ها می‌توانند به‌عنوان یک شی از مجموعه Observable Properties تعریف شوند. هدف وضعیت‌ ها در ری اکت، کنترل رفتار کامپوننت است. به‌عبارتی دیگر، State یک کامپوننت شی‌ای است که اطلاعاتی را در خود نگه می‌دارد. این اطلاعات ممکن است در طول عمر کامپوننت تغییر کنند. برای مدیریت وضعیت در کامپوننت های ری اکت، باید از روش‌های زیر استفاده کنیم.

ایجاد وضعیت در کامپوننت های ری اکت

برای ساخت وضعیت در کامپوننت های ری اکت، باید یک شی را در «constructor» کامپوننت کلاسی ایجاد کنیم. پس دستور زیر را می‌نویسیم:

import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            brand: 'Ford', // Example property in the state
        };
    }

    render() {
        return (
            <div>
                <h1>My Car</h1>
                {/* Other component content */}
            </div>
        );
    }
}

export default MyComponent;

به روزرسانی وضعیت در کامپوننت های ری اکت

در React، یک شی State را می‌توان با استفاده از متد ()setState به‌روز کرد. در مثال زیر، وضعیتی را می‌سازیم و آن را برای ایجاد یک شمارنده استفاده می‌کنیم.

// Filename - index.js

import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        };
    }

    increment = () => {
        this.setState((prevState) => ({
            count: prevState.count + 1,
        }));
    };

    decrement = () => {
        this.setState((prevState) => ({
            count: prevState.count - 1,
        }));
    };

    render() {
        return (
            <div>
                <h1>
                    The current count is :{" "}
                    {this.state.count}
                </h1>
                <button onClick={this.increment}>
                    Increase
                </button>
                <button onClick={this.decrement}>
                    Decrease
                </button>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

خروجی این دستور به‌شکل زیر خواهد بود:

تست کامپوننت‌ ها در ری اکت

تست کامپوننت ها در ری اکت ، روشی برای ارزیابی واکنش کیفیت و قابلیت اطمینان محصولات است که باید قبل از عرضه به بازار و مشتریان، به‌طور کامل انجام شود. علاوه‌بر این، تست هد اجزا در ری اکت، دستاوردهای زیر را به‌دنبال دارد:

اطمینان از صحت عملکرد برنامه مطابق‌با کدهای نوشته‌شده و اهداف توسعه‌دهندگان
بروز خطاهای کمتر در وب‌اپلیکیشن و سایت‌ها
ارائه تجربه کاربری مناسب
اطمینان از عملکرد صحیح و روان محصولات هنگام به‌روزرسانی و افزودن کدهای جدید

سه نوع تست را می‌توان برای محصولات تولیدشده با React نوشت:

تست‌ واحد: Unit Test برای آزمایش عملکرد یک کامپوننت مجزا به‌صورت مستقل انجام می‌شود.
تست یکپارچه‌سازی: Integration Test عملکرد صحیح کامپوننت‌ ها در ری اکت را تضمین می‌کنند. منظور از Integration در این تست، کامپوننت‌های مختلفی هستند که باهم کار می‌کنند. ارزیابی تعامل بین کامپوننت‌های والد و فرزند یا کامپوننت‌هایی که دارای وابستگی‌ها هستند، برعهده این تست است.
تست E2E : این روش تست‌ کامپوننت ها در ری اکت برای ارزیابی UI انجام می‌شود؛ بنابراین، تضمین ساخت یا توسعه تجربه کاربری مناسب با آزمایش یک برنامه کامل، وظیفه این تست است.

بهینه‌ سازی کامپوننت‌ ها در ری اکت

بهینه‌سازی کامپوننت ها در ری اکت ، مستلزم رعایت برخی نکات است تا بتوان به هدف اصلی، یعنی ارائه تجربه کاربری روان و پویا، دست یافت. در ادامه، سه روش بهینه‌سازی React Components را توضیح خواهیم داد.

ارائه کلید برای هر Render

گنجاندن خصوصیت key در لیست‌ها: هنگام رندر کردن لیست آیتم‌ها، به‌طور مداوم یک خصوصیت کلید را به هر آیتم اختصاص دهید. این کار به React کمک می‌کند تا تغییرات، اضافه‌شدن‌ آیتم‌ها یا حذف‌ آن‌ها را به‌طور مؤثری شناسایی کند و عملکرد کلی محصول را بهبود بخشد.
رندر مشروط: فقط المان‌های UI را رندر کنید که براساس وضعیت یا خصوصیات برنامه نیاز می‌شوند. از عبارات شرطی مانند «if» یا عملگرهای سه‌مبنایی (Ternary Operators) برای کنترل خروجی استفاده کنید.
Fragment Shorthand (<>…</>): هنگام برگرداندن چند المان JSX از یک کامپوننت، برای جلوگیری از ایجاد گره‌های غیرضروری در DOM، از کوتاه‌نویسی قطعه یا «Fragment Shorthand» استفاده کنید.

تقسیم کد و تکنیک بارگذاری Lazy

تقسیم کد (Code Splitting): کد برنامه را با استفاده از تکنیک‌هایی مانند dynamic imports (import()) به گروه‌های کوچک‌تری تقسیم کنید. این کار زمان بارگذاری اولیه را کاهش می‌دهد و فقط المان‌هایی را فرا می‌خواند که در برنامه صدا زده می‌شوند.
بارگذاری Lazy (Lazy Loading): کامپوننت‌هایی که در لحظه و به‌شکل فوری در رندر اولیه مورد نیاز نیستند را با استفاده تابع Lazy ری اکت فرا بخوانید. همچنین، پیاده‌سازی این روش با استفاده از کتابخانه‌های شخص ثالث، مانند react-lazyload ، هم ممکن است.

ابزارهای توسعه و Profiling ری‌اکت

React DevTools: از «React DevTools» در مرورگر خود برای بررسی سلسله‌مراتب کامپوننت‌ها، شناسایی رندرهای مجدد و اندازه‌گیری عملکرد استفاده کنید.
ابزارهای Profiling: از ویژگی‌های مانند بخش Developer Tools مرورگرتان یا کتابخانه‌های Profiling شخص ثالث مانند «react-devtools-perf» استفاده کنید. این ابزارها به شما کمک می‌کنند تا نقاط اصلی فرآیند برنامه‌های ری‌اکت را ببینید و درصورت نیاز، آن‌ها را اصلاح کنید.

جمع بندی: کامپوننت ها در ری اکت

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

تجربه شما در استفاده از کامپوننت های ری اکت چگونه بوده است؟ بیشترین کامپوننتی که استفاده می‌کنید، کدام است؟ می‌توانید آن را در بخش نظرات با ما و سایر کاربران به‌اشتراک بگذارید.