🔹 React ES6 Classes (کلاس‌ها در React)

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

🔸 کلاس (Class) در ES6 چیست؟

کلاس‌ها در ES6 راهی ساده‌تر و خواناتر برای ساخت اشیای مبتنی بر prototype هستن.

🔹 مثال ساده:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

const user = new Person("Ali");
console.log(user.greet()); // Hello, Ali

📌 ()constructor تابعی‌ست که هنگام ساخت شیء از کلاس اجرا میشه.

🔸 کلاس‌ها در React

قبل از معرفی Hooks در React (نسخه 16.8)، تمام کامپوننت‌های پیچیده با کلاس‌ها ساخته می‌شدن.

🔹 مثال یک کامپوننت کلاسی:

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

📌 اینجا:

• Welcome یک کلاس React است.

• از React.Component ارث‌بری کرده.

• متد ()render همیشه باید JSX برگردونه.

🔸 استفاده در App.js

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <Welcome name="Ali" />
      <Welcome name="Sara" />
    </div>
  );
}

export default App;

📌 خروجی:

Hello, Ali
Hello, Sara

🔸 State در کامپوننت کلاسی

کلاس‌ها می‌تونن state داخلی داشته باشن (برخلاف تابع‌ها در نسخه‌های قدیمی).

import React, { Component } from "react";

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increase = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div style={{ textAlign: "center" }}>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increase}>Increase</button>
      </div>
    );
  }
}

export default Counter;

📌 خروجی:

Count: 0
[Increase]

وقتی روی دکمه کلیک می‌کنی، عدد افزایش پیدا می‌کنه 🎯

🔸 رویدادها در کلاس‌ها

برای اینکه this درست عمل کنه، معمولاً از Arrow Function استفاده می‌کنیم تا بایند بشه:

handleClick = () => {
  console.log("Button clicked!");
};

و در JSX:

<button onClick={this.handleClick}>Click Me</button>

🔸 متدهای چرخه‌ی حیات (Lifecycle Methods)

کامپوننت‌های کلاسی از متدهایی استفاده می‌کنن که در زمان‌های مختلف از چرخه حیات کامپوننت اجرا می‌شن.

مثلاً:

class Example extends Component {
  componentDidMount() {
    console.log("Component Mounted");
  }

  componentWillUnmount() {
    console.log("Component will unmount");
  }

  render() {
    return <p>Lifecycle example</p>;
  }
}

📌 در کامپوننت‌های تابعی، معادل این متدها با useEffect() پیاده‌سازی میشه.

🔸 Props در کلاس‌ها

مقدار props از this.props گرفته میشه:

class User extends Component {
  render() {
    return <h2>User: {this.props.name}</h2>;
  }
}

🔸 مقایسه کامپوننت تابعی و کلاسی

🔸 زمانی که هنوز از کلاس استفاده میشه

هرچند امروز بیشتر از کامپوننت‌های تابعی استفاده میشه، اما کلاس‌ها هنوز کاربرد دارن در:

• پروژه‌های قدیمی React

• بعضی کتابخانه‌ها که فقط از کلاس پشتیبانی می‌کنن

• موقع مطالعه یا درک مفاهیم قدیمی‌تر React

✅ خلاصه

✅ نتیجه:
در این درس یاد گرفتی چطور با کلاس‌ها در React کار کنی، state و props رو مدیریت کنی، رویدادها رو کنترل کنی و چرخه‌ی حیات کامپوننت رو درک کنی.
هرچند امروز بیشتر از تابع‌ها و هوک‌ها استفاده میشه، اما دونستن کلاس‌ها هنوز ضروریه.