لیست‌ها ری‌ اکت

لیست‌ها

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

متد map()، هر آیتم موجود در آرایه را به یک عنصر JSX (مانند <li>) تبدیل می‌کند.

ساخت لیست

برای ساخت یک لیست در ری‌اکت، کافی‌ست یک آرایه از داده‌ها داشته باشید و با استفاده از متد map() برای هر آیتم، یک عنصر JSX تولید کنید. بیایید با یک مثال ساده شروع کنیم:

function ColorList() {
  const colors = ["red", "green", "blue"];
  return (
    <ul>
      {colors.map((color, index) => (
        <li key={index}>{color}</li>
      ))}
    </ul>
  );
}

colors: آرایه‌ای از رشته‌ها است که قصد نمایش آن را داریم.

map(): برای هر آیتم در آرایه، یک عنصر <li> می‌سازد و در خروجی بازمی‌گرداند.

نکته: حتی در لیست‌های ساده، استفاده از index یا یک ID به‌عنوان key ضروری است تا ری‌اکت بتواند عناصر را به‌درستی مدیریت کند.

کلید چیست؟

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

این ویژگی key معمولاً یک شناسه یکتا (مانند ID) یا ایندکس آرایه است. با تعیین key، ری‌اکت می‌تواند عملکرد مؤثرتری هنگام اضافه‌کردن، حذف یا جابجایی آیتم‌ها داشته باشد.

function TodoList() {
  const todos = [
    { id: 1, task: "task1" },
    { id: 2, task: "task2" },
  ];
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.task}</li>
      ))}
    </ul>
  );
}

key={todo.id}: این ویژگی به ری‌اکت کمک می‌کند تا هر آیتم را به‌درستی شناسایی و مدیریت کند.

اگر ویژگی key را مشخص نکنید، ممکن است ری‌اکت هشدار دهد یا در هنگام به‌روزرسانی لیست، عملکرد مطلوبی نداشته باشد.

ترکیب لیست با وضعیت

لیست‌ها معمولاً با state ترکیب می‌شوند تا امکان تغییر پویا در داده‌ها فراهم شود. در مثال زیر، کاربر می‌تواند یک رنگ جدید را به لیست اضافه کند:

import React, { useState } from 'react';

function AddColor() {
  const [colors, setColors] = useState(["blue", "red"]);
  const [newColor, setNewColor] = useState("");

  const handleAdd = () => {
    if (newColor) {
      setColors([...colors, newColor]);
      setNewColor("");
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newColor}
        onChange={(e) => setNewColor(e.target.value)}
        placeholder="New Color"
      />
      <button onClick={handleAdd}>Add Color</button>
      <ul>
        {colors.map((color, index) => (
          <li key={index}>{color}</li>
        ))}
      </ul>
    </div>
  );
}

colors: استیتی که آرایه‌ی رنگ‌ها را در خود نگه می‌دارد.
handleAdd: تابعی که هنگام کلیک روی دکمه اجرا می‌شود و رنگ جدید را به لیست اضافه می‌کند.
[...colors, newColor]: با استفاده از عملگر ...، نسخه‌ای جدید از آرایه می‌سازد و رنگ جدید را به آن اضافه می‌کند.

نکته: برای تغییر آرایه‌ها، همواره از یک کپی جدید استفاده کنید و هرگز مستقیماً مقدار state را تغییر ندهید.

خلاصه درس

در این درس یاد گرفتید:

چگونه با استفاده از map() لیست‌هایی پویا در ری‌اکت بسازید.
چرا ویژگی key مهم است و چگونه به درستی از آن استفاده کنید.
چگونه لیست‌ها را با state و رویدادها ترکیب کنید تا رابط‌های تعاملی ایجاد شود.

تمرین

مشاهده پاسخ

توسعه دهندگان

نیما عراقی