لیست‌ها و کلیدها
در ری‌اکت (React)، لیست‌ها و کلیدها ابزارهای کلیدی برای مدیریت و نمایش داده‌های پویا در برنامه‌های وب مدرن و SPAs هستند. لیست‌ها مجموعه‌ای از آیتم‌های تکرار شونده هستند که می‌توانند شامل وظایف، محصولات یا نظرات کاربران باشند. کلیدها (Keys) شناسه‌های یکتا برای هر آیتم در لیست هستند که به ری‌اکت اجازه می‌دهند تغییرات، افزودن یا حذف آیتم‌ها را به صورت بهینه مدیریت کند و از رندرهای غیرضروری جلوگیری کند.
استفاده صحیح از لیست‌ها و کلیدها با مفاهیم اصلی ری‌اکت مانند کامپوننت‌ها، مدیریت استیت، جریان داده و چرخه حیات ارتباط نزدیکی دارد. کامپوننت‌ها منطق و رابط کاربری را کپسوله می‌کنند، استیت و پراپس جریان داده بین کامپوننت‌ها را مدیریت می‌کنند و کلیدها تضمین می‌کنند که ری‌اکت فقط بخش‌های تغییر یافته لیست را رندر کند. در این آموزش، شما یاد می‌گیرید که چگونه لیست‌ها را به درستی رندر کنید، کلیدهای یکتا ایجاد کنید و الگوهای عملی برای ساخت کامپوننت‌های قابل استفاده مجدد را پیاده‌سازی کنید.
مثال پایه
jsximport React, { useState } from 'react';
function ListTasks() {
const [tasks, setTasks] = useState([
{ id: 1, title: 'خرید' },
{ id: 2, title: 'تمرین ری‌اکت' },
{ id: 3, title: 'نوشتن مقاله' },
]);
return ( <div> <h2>لیست وظایف من</h2> <ul>
{tasks.map((task) => ( <li key={task.id}>{task.title}</li>
))} </ul> </div>
);
}
export default ListTasks;این مثال پایه، استفاده از useState برای مدیریت استیت محلی و رندر یک لیست از آیتم‌ها را نشان می‌دهد. هر آیتم دارای یک id یکتا است که به عنوان کلید در map استفاده می‌شود. این کلیدها ری‌اکت را قادر می‌سازند تا تغییرات در لیست را بهینه مدیریت کند و از رندرهای غیرضروری جلوگیری شود.
تابع map آیتم‌های آرایه tasks را به JSX عناصر
مثال کاربردی
jsximport React, { useState } from 'react';
function TaskManager() {
const [tasks, setTasks] = useState([
{ id: 1, title: 'خرید' },
{ id: 2, title: 'تمرین ری‌اکت' },
{ id: 3, title: 'نوشتن مقاله' },
]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
if (newTask.trim() === '') return;
const newId = tasks.length > 0 ? tasks[tasks.length - 1].id + 1 : 1;
setTasks([...tasks, { id: newId, title: newTask }]);
setNewTask('');
};
const removeTask = (id) => {
setTasks(tasks.filter((task) => task.id !== id));
};
return ( <div> <h2>مدیر وظایف</h2>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="وظیفه جدید"
/> <button onClick={addTask}>افزودن</button> <ul>
{tasks.map((task) => ( <li key={task.id}>
{task.title}{' '}
<button onClick={() => removeTask(task.id)}>حذف</button> </li>
))} </ul> </div>
);
}
export default TaskManager;این مثال کاربردی، مفاهیم لیست‌ها و کلیدها را در یک سناریوی واقعی نشان می‌دهد. با استفاده از useState، لیست وظایف به صورت پویا مدیریت می‌شود. کلیدها (key={task.id}) تضمین می‌کنند که ری‌اکت فقط آیتم‌های تغییر یافته را رندر کند و عملکرد بهینه بماند.
تابع addTask و removeTask از mutable state اجتناب می‌کنند و آرایه‌های جدید ایجاد می‌کنند تا رندرهای غیرضروری جلوگیری شود. این الگو می‌تواند در پروژه‌های SPA پیچیده نیز استفاده شود. اعتبارسنجی ورودی و مدیریت خطا، تجربه کاربری بهتر و ایمن را تضمین می‌کند. این نمونه به خوبی جریان داده، چرخه حیات و بهینه‌سازی عملکرد در ری‌اکت را نشان می‌دهد.
بهترین شیوه‌ها و اشتباهات رایج در لیست‌ها و کلیدها شامل موارد زیر است: هر آیتم لیست باید یک کلید یکتا داشته باشد و استفاده از اندیس آرایه تنها برای لیست‌های ثابت توصیه می‌شود. State نباید مستقیم تغییر کند؛ همواره از نسخه‌های جدید آرایه یا آبجکت استفاده کنید.
Prop drilling می‌تواند خوانایی را کاهش دهد؛ استفاده از Context API یا کتابخانه‌های مدیریت state توصیه می‌شود. برای بهینه‌سازی عملکرد از React.memo، useCallback و useMemo استفاده کنید. اعتبارسنجی و مدیریت خطا باعث ایمنی و تجربه کاربری بهتر می‌شود. برای رفع اشکال، React DevTools به شناسایی مشکلات کلید و رندر غیرضروری کمک می‌کند.
📊 جدول مرجع
| ری‌اکت (React) Element/Concept | Description | Usage Example |
|---|---|---|
| useState | مدیریت state محلی | const [state, setState] = useState(initialValue); |
| map | تبدیل آرایه به JSX عناصر | array.map(item => <li key={item.id}>{item.title}</li>); |
| key | شناسه یکتا برای آیتم‌ها | <li key={item.id}>{item.title}</li> |
| Event Handler | بروزرسانی state با تعامل کاربر | <button onClick={() => removeTask(id)}>حذف</button> |
| Spread Operator | ایجاد آرایه یا آبجکت جدید بدون تغییر | setTasks([...tasks, newTask]); |
لیست‌ها و کلیدها در ری‌اکت برای ساخت رابط‌های پویا و بهینه ضروری هستند. استفاده درست از آن‌ها باعث بهبود عملکرد، نگهداری آسان و توسعه کامپوننت‌های قابل استفاده مجدد می‌شود.
گام بعدی مطالعه Context API، هک‌های چرخه حیات مانند useEffect، و کتابخانه‌های کامپوننت بزرگ است. این مفاهیم در کنار لیست‌ها و کلیدها امکان ساخت اپلیکیشن‌های مقیاس‌پذیر و maintainable را فراهم می‌کنند. منابع مانند مستندات رسمی ری‌اکت، آموزش Hooks و نمونه پروژه‌های SPA برای تمرین بیشتر مفید هستند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود