🔹 React ES6 Destructuring (تجزیه یا بازکردن مقادیر در React)

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

🔸 مفهوم Destructuring

Destructuring یا «تجزیه» در جاوااسکریپت یعنی اینکه بتونی مقادیر درون آرایه یا ویژگی‌های یک آبجکت رو به‌صورت جداگانه داخل متغیرها ذخیره کنی.

📘 به جای اینکه با سینتکس طولانی object.property یا array[index] کار کنی، به راحتی اون‌ها رو باز می‌کنی.

🔹 مثال ۱: Destructuring در آرایه‌ها

const colors = ["red", "green", "blue"];

// بدون destructuring
const first = colors[0];
const second = colors[1];

// با destructuring
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // red
console.log(secondColor); // green
console.log(thirdColor);  // blue

📌 با استفاده از [ ] مقادیر آرایه رو به‌صورت مستقیم به متغیرها اختصاص می‌دی.

🔹 مثال ۲: Destructuring در آبجکت‌ها

const user = {
  name: "Ali",
  age: 25,
  city: "Tehran"
};

// بدون destructuring
console.log(user.name);
console.log(user.age);

// با destructuring
const { name, age, city } = user;

console.log(name); // Ali
console.log(age);  // 25
console.log(city); // Tehran

📌 با استفاده از { } ویژگی‌های آبجکت رو به متغیرهای هم‌نامشون اختصاص می‌دی.

🔹 مثال ۳: تغییر نام متغیرها هنگام destructuring

const person = { firstName: "Sara", age: 22 };

const { firstName: fname, age: years } = person;

console.log(fname); // Sara
console.log(years); // 22

📌 با استفاده از : می‌تونی اسم متغیر خروجی رو تغییر بدی.

🔹 مثال ۴: مقدار پیش‌فرض در Destructuring

const student = { name: "Reza" };

const { name, grade = "A" } = student;

console.log(name);  // Reza
console.log(grade); // A

📌 اگر ویژگی وجود نداشت، مقدار پیش‌فرض (A) استفاده میشه.

🔹 مثال ۵: Destructuring در React Props

در React، یکی از پرکاربردترین جاهای destructuring برای props کامپوننت‌هاست.

// بدون destructuring
function Welcome(props) {
  return <h2>Hello {props.name}!</h2>;
}

// با destructuring
function Welcome({ name }) {
  return <h2>Hello {name}!</h2>;
}

export default Welcome;

📌 با destructuring، مستقیم به مقدار name دسترسی داری بدون نیاز به props.name.

🔹 مثال ۶: Destructuring چند prop

function UserCard({ name, age, city }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

و هنگام استفاده:

<UserCard name="Ali" age={25} city="Tehran" />

📌 props به‌صورت جداگانه استخراج شدن و کد تمیزتر و خواناتر شده.

🔹 مثال ۷: Destructuring در State (با useState)

در React، وقتی از ()useState استفاده می‌کنی، در واقع از destructuring آرایه استفاده کردی!

import { useState } from "react";

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

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

export default Counter;

📌 [count, setCount] دقیقاً با destructuring ساخته شده.
اولی مقدار state و دومی تابعی برای تغییر اون هست.

🔹 مثال ۸: Destructuring در تابع بازگشتی

گاهی متد یا تابعی چند مقدار در قالب آبجکت برمی‌گردونه.

function getUser() {
  return { name: "Ali", age: 28, city: "Mashhad" };
}

const { name, city } = getUser();

console.log(name); // Ali
console.log(city); // Mashhad

📌 فقط خاصیت‌هایی که نیاز داری رو از خروجی جدا می‌کنی.

✅ نکته‌ها

✅ خلاصه

✅ نتیجه:
Destructuring یکی از ویژگی‌های کلیدی ES6 است که در React به‌طور گسترده برای props، state و داده‌ها استفاده می‌شود.
این روش باعث تمیزی، کوتاهی و خوانایی بالای کد می‌شود.