🔹 React ES6 Spread Operator (عملگر گسترش در React)

در این درس یاد می‌گیری Spread Operator (...) چیه، چطور در جاوااسکریپت و مخصوصاً در React استفاده میشه، و چه کاربردهای مهمی در props، state و آرایه‌ها داره.

🔸 مفهوم Spread Operator

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

🔹 مثال ۱: گسترش آرایه

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

// ترکیب دو آرایه با spread operator
const allNumbers = [...numbers1, ...numbers2];

console.log(allNumbers); // [1, 2, 3, 4, 5, 6]

📌 ...numbers1 یعنی همه‌ی عناصر آرایه اول رو باز کن و در آرایه جدید قرار بده.

🔹 مثال ۲: کپی کردن آرایه

const fruits = ["apple", "banana", "cherry"];
const newFruits = [...fruits];

console.log(newFruits); // ["apple", "banana", "cherry"]

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

🔹 مثال ۳: Spread Operator در آبجکت‌ها

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

console.log(updatedUser);
// { name: "Ali", age: 25, city: "Tehran" }

📌 این کار معادل اینه که از تمام ویژگی‌های user استفاده کنی و ویژگی جدیدی بهش اضافه کنی.

🔹 مثال ۴: بروزرسانی مقادیر آبجکت

const user = { name: "Sara", age: 22, city: "Mashhad" };
const updatedUser = { ...user, city: "Tehran" };

console.log(updatedUser);
// { name: "Sara", age: 22, city: "Tehran" }

📌 وقتی ویژگی تکراری وجود داره، مقدار جدید جایگزین مقدار قبلی میشه.

🔹 مثال ۵: Spread Operator در React Props

در React می‌تونی props رو به‌صورت کامل با ... منتقل کنی:

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

const user = { name: "Ali", age: 30 };

function App() {
  return <Profile {...user} />;
}

📌 ...user یعنی تمام ویژگی‌های آبجکت user (مثل name و age) به عنوان props ارسال بشن.

🔹 مثال ۶: Spread Operator در State (React useState)

در React، برای بروزرسانی stateهایی که آبجکت هستند، باید همیشه از spread استفاده کنی تا state قبلی حفظ بشه.

import { useState } from "react";

function UserInfo() {
  const [user, setUser] = useState({ name: "Ali", age: 25, city: "Tehran" });

  const updateCity = () => {
    setUser({ ...user, city: "Mashhad" });
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.city}</p>
      <button onClick={updateCity}>Change City</button>
    </div>
  );
}

📌 اگر از ...user استفاده نکنی، فقط ویژگی city باقی می‌مونه و بقیه حذف میشن.

🔹 مثال ۷: افزودن عنصر جدید به آرایه در React

import { useState } from "react";

function TodoList() {
  const [tasks, setTasks] = useState(["Learn React", "Practice JS"]);

  const addTask = () => {
    setTasks([...tasks, "Build a project"]);
  };

  return (
    <div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
      <button onClick={addTask}>Add Task</button>
    </div>
  );
}

📌 با setTasks([...tasks, "Build a project"])، تسک جدید به انتهای لیست اضافه میشه بدون حذف قبلی‌ها.

🔹 مثال ۸: ترکیب چند state object

const user = { name: "Ali", age: 30 };
const address = { city: "Tehran", country: "Iran" };

const fullProfile = { ...user, ...address };

console.log(fullProfile);
// { name: "Ali", age: 30, city: "Tehran", country: "Iran" }

📌 می‌تونی چند آبجکت مختلف رو با هم ترکیب کنی.

✅ نکته‌ها

✅ خلاصه

✅ نتیجه

Spread Operator یکی از پرکاربردترین قابلیت‌های ES6 در React است.
این عملگر در props، state و داده‌ها باعث می‌شود کد تمیزتر، کوتاه‌تر و ایمن‌تر باشد.