🔹 React ES6 Arrow Functions (توابع فلش در React)

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

🔸 معرفی Arrow Function

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

🔹 مثال ساده:

// تابع معمولی
function sayHello() {
  return "Hello World!";
}

// تابع فلش
const sayHello = () => "Hello World!";

📌 خروجی هر دو یکیه، اما نسخه دوم کوتاه‌تر و تمیزتره.

🔸 استفاده از Arrow Function در React

در React، توابع فلش بیشتر برای:

1. تعریف کامپوننت‌های تابعی

2. تعریف رویدادها (event handlers)
   استفاده می‌شن.

🔹 مثال ۱: کامپوننت تابعی ساده

// تابع معمولی
function Welcome() {
  return <h2>Hello React!</h2>;
}

// تابع فلش
const Welcome = () => <h2>Hello React!</h2>;

export default Welcome;

📌 هر دو کاملاً برابرند — فقط تابع فلش ساده‌تره و this در اون رفتار بهتری داره.

🔹 مثال ۲: ارسال props

const Greeting = (props) => {
  return <h3>Hello, {props.name}!</h3>;
};

export default Greeting;

یا حتی کوتاه‌تر 👇

const Greeting = ({ name }) => <h3>Hello, {name}!</h3>;

📌 استفاده از destructuring باعث خواناتر شدن کد میشه.

🔹 مثال ۳: تابع فلش برای Event Handler

تابع فلش در کنترل رویدادها بسیار مفیده، چون به‌صورت خودکار this رو bind می‌کنه.

import { useState } from "react";

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

  const increase = () => setCount(count + 1);

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

export default Counter;

📌 در اینجا نیازی به this یا bind نداریم، چون Arrow Function خودش محیط lexical رو نگه می‌داره.

🔹 مثال ۴: استفاده در ()map

const numbers = [1, 2, 3, 4];

const List = () => (
  <ul>
    {numbers.map((num) => (
      <li key={num}>{num}</li>
    ))}
  </ul>
);

📌 هر num در حلقه با تابع فلش چاپ میشه.

🔹 مثال ۵: مقایسه با تابع معمولی در کلاس

در کامپوننت‌های کلاسی باید دستی bind می‌کردیم:

class ButtonClick extends React.Component {
  handleClick() {
    console.log("Clicked!");
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>Click</button>;
  }
}

ولی با تابع فلش:

class ButtonClick extends React.Component {
  handleClick = () => {
    console.log("Clicked!");
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

📌 حالا this همیشه درست کار می‌کنه ✅

🔹 سینتکس کوتاه‌تر

وقتی فقط یک دستور return داری، می‌تونی آکولاد و return رو حذف کنی:

const square = x => x * x;

📌 معادل:

const square = (x) => {
  return x * x;
};

✅ نکته‌ها

✅ خلاصه

✅ نتیجه:
توابع فلش باعث می‌شن کدهای React تمیزتر، کوتاه‌تر و قابل فهم‌تر بشن.
از اون‌ها هم برای تعریف کامپوننت و هم برای مدیریت state و eventها استفاده میشه.