آشنایی با کامپوننت‌های ری‌اکت

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

کامپوننت‌ها می‌توانند به دو دسته کامپوننت‌های تابعی و کامپوننت‌های کلاس‌بندی شده تقسیم شوند. با گذشت زمان، کامپوننت‌های تابعی به دلیل سادگی و قدرت هوک‌ها مانند useState و useEffect، بیشتر مورد استقبال قرار گرفته‌اند.

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

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

مثالی از یک کامپوننت ساده

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

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>شما {count} بار کلیک کرده‌اید.</p>
      <button onClick={() => setCount(count + 1)}>
        کلیک کنید
      </button>
    </div>
  );
}

export default Counter;

خط اول: React و useState را از کتابخانه ری‌اکت وارد می‌کند.
خط سوم: اینجا فانکشن Counter تعریف شده که کامپوننت ما را می‌سازد.
خط چهارم: از هوک useState برای مدیریت حالت داخلی شمارشگر استفاده می‌کند و به آن مقدار اولیهٔ صفر داده شده است.
خط ششم-خط یازدهم: در بازگشتی، یک div وجود دارد که شامل یک پاراگراف و یک دکمه است. متن پاراگراف بر اساس مقدار count به‌روز می‌شود و کلیک کردن روی دکمه مقدار count را افزایش می‌دهد.
خط دوازدهم: کامپوننت را برای استفاده در سایر فایل‌ها توابع به صورت export default صادر می‌کند.