في هذا الدرس 6تصفّح المواضيع
تعامَل المصفوفات في حالة React تماماً مثل الكائنات بوصفها هياكل غير قابلة للتعديل المباشر. لذلك يُحظر استدعاء الدوال المغيرة للمصفوفة الأصلية مباشرةً على متغير الحالة مثل push() وpop() وsplice() وsort() وreverse() أو الإسناد المباشر بالفهرس.
وبدلاً منها نعتمد حصراً على الأدوات النقية التي تنتج مصفوفة جديدة بمرجع مستقل مثل معامل الانتشار [...items] ودوال filter() وmap() وslice().
لإضافة عنصر جديد في نهاية المصفوفة كبديل نقي لدالة push()، ضع العنصر بعد معامل الانتشار هكذا setModules([...modules, newModule]). ولإضافته في بداية المصفوفة كبديل لدالة unshift()، ضعه قبل الانتشار هكذا setModules([newModule, ...modules]).
import { useState } from 'react';
function TagList() {
const [tags, setTags] = useState(['JSX', 'Props']);
const add = () => setTags([...tags, 'Hooks']);
return (
<button onClick={add}>Tags: {tags.length}</button>
);
}تُعد دالة filter() الطريقة الأنقى والأكثر مقروئية لحذف عنصر من مصفوفة الحالة؛ فكتابة setItems(items.filter(item => item.id !== targetId)) تنتج مصفوفة جديدة تحتفظ بجميع العناصر باستثناء العنصر صاحب المعرّف المطلوب حذفه.
import { useState } from 'react';
function SavedLessons() {
const [list, setList] = useState([
{ id: 'a', title: 'Events' },
{ id: 'b', title: 'useState' },
]);
const del = (id) =>
setList(list.filter((x) => x.id !== id));
return (
<button onClick={() => del('a')}>Remove</button>
);
}لتعديل عنصر واحد أو تبديل حالة إنجاز مهمة داخل مصفوفة كائنات، استخدم الدالة map()؛ فعندما يتطابق item.id === targetId نعيد كائناً منسوخاً جديداً { ...item, done: !item.done }، ونعيد بقية العناصر كما هي دون تعديل.
import { useState } from 'react';
function TaskChecklist() {
const [tasks, setTasks] = useState([
{ id: 1, text: 'Write SVG', done: false },
]);
const flip = (id) =>
setTasks(tasks.map((t) =>
t.id === id ? { ...t, done: !t.done } : t
));
return <button onClick={() => flip(1)}>Done</button>;
}تتطلب عمليتا الإدراج في موضع محدد والترتيب انتباهاً خاصاً:
- الإدراج عند الفهرس
at: نضع العنصر الجديد بين شطري الدالة النقيةslice()هكذا[...items.slice(0, at), newItem, ...items.slice(at)]. - الترتيب أو العكس: تعدّل الدالتان
sort()وreverse()المصفوفة في مكانها! لذا انسخ المصفوفة أولاً عبر[...items]ثم رتب النسخة الجديدة ومررها لدالة الضبط.
import { useState } from 'react';
function ScoreBoard() {
const [scores, setScores] = useState([88, 72, 95]);
function sortAsc() {
setScores([...scores].sort((a, b) => a - b));
}
return <button onClick={sortAsc}>Sort Scores</button>;
}بهذا الدرس تكون قد أتممت جميع دروس الوحدة الرابعة حول الأحداث وحالة المكونات! احتفظ بالجدول المرجعي الشامل التالي لاختيار الدالة النقية المناسبة لكل عملية على مصفوفات الحالة:
| عملية المصفوفة | تجنب (يعدل المصفوفة الأصلية) | اعتمد (يعيد مصفوفة جديدة نقية) |
|---|---|---|
| إضافة عناصر جديدة | push(), unshift() | [...arr, item] أو [item, ...arr] |
| حذف عناصر من القائمة | pop(), shift(), splice() | arr.filter(x => x.id !== id) |
| استبدال أو تحديث عنصر | arr[i] = next | arr.map(x => x.id === id ? { ...x } : x) |
| الترتيب أو عكس الاتجاه | arr.sort(), arr.reverse() | [...arr].sort(), [...arr].reverse() |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس جميع العمليات النقية على مصفوفات الحالة في React: الإضافة في البداية والنهاية بمعامل الانتشار، والحذف بدالة filter، وتعديل الكائنات الداخلية بـ map، والإدراج بـ slice، ونسخ المصفوفة قبل الترتيب أو العكس. الخطوة التالية: انتقل الآن إلى الدرس رقم 22 «حقول الإدخال المحكومة وإرسال النماذج في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Pure Array Method دالة مصفوفة نقية
- دالة قياسية مثل map أو filter أو slice تعيد مصفوفة جديدة تماماً دون المساس بالمصفوفة الأصلية.
- للمراجعة
- 02 In-Place Mutation التعديل الموضعي المباشر
- تغيير محتوى أو ترتيب نفس مرجع المصفوفة في الذاكرة عبر دوال مغيرة مثل push وsplice وsort.
- للمراجعة
- 03 Slice Sandwich الإدراج بشطري slice
- نمط نقي لإدراج عنصر في فهرس محدد بوضعه بين شطري slice قبل الموضع وبعده.
- للمراجعة
- 04 Copy-Then-Sort النسخ قبل الترتيب
- إنشاء نسخة سطحية من مصفوفة الحالة أولاً قبل تطبيق دالة الترتيب أو العكس عليها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CRUD CRUD
- Create, Read, Update, Delete
- العمليات الأربع الأساسية لإدارة القوائم والمنفذة بنقاء عبر الانتشار وmap وfilter.
- للمراجعة
- 02 ID ID
- Identifier
- المعرّف الفريد الثابت لكل عنصر والذي نعتمد عليه في الحذف والتعديل ومفاتيح العرض.
- للمراجعة
- 03 ES6 ES6
- ECMAScript 2015
- معيار اللغة الحديث الذي وفر معامل انتشار المصفوفات المختصر.
- للمراجعة
- 04 UI UI
- User Interface
- قوائم الواجهة التفاعلية التي تتحدث بموثوقية تامة عند إرجاع مصفوفة جديدة في كل تغيير.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح قائمة المهام في محرر التجريب وأضف زراً يستخدم map لنسخ جميع المهام مع ضبط خاصية done على true.
-
في مثال ترتيب الدروس بمحرر التجريب، أضف زراً ينسخ المصفوفة ويرتبها تنازلياً من الأكبر إلى الأصغر.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
أي دالة مصفوفات مما يلي تعدّل المصفوفة الأصلية في مكانها ويُحظر استدعاؤها مباشرةً على متغير الحالة في React؟
تعدّل الدالة splice() المصفوفة الأصلية مباشرةً، بينما تعيد filter وmap وslice مصفوفات جديدة.
أي تعبير برمجي يضيف العنصر newNote في بداية مصفوفة الحالة notes بطريقة نقية؟
وضع العنصر الجديد قبل معامل الانتشار [newNote, ...notes] يضيفه في مطلع مصفوفة جديدة.
ما الطريقة القياسية النقية في React لحذف عنصر يحمل المعرّف targetId من مصفوفة الحالة items؟
تعيد دالة filter مصفوفة جديدة تستبعد العنصر المطابق للمعرّف المطلوب حذفه.
كيف تبدّل قيمة الخاصية done لمهمة واحدة تطابق id داخل مصفوفة المهام tasks بنقاء تام؟
عبر دالة map مع إرجاع كائن منسوخ { ...t, done: !t.done } للمهمة المطابقة وإرجاع البقية كما هي.
استدعاء scores.sort() مباشرةً على مصفوفة الحالة غير آمن لأن دالة sort تعدل ترتيب نفس المصفوفة في مكانها.
صواب؛ لذا يجب نسخ المصفوفة أولاً عبر [...scores] قبل استدعاء sort أو reverse.
أي تعبير نقي يدرج العنصر newLesson عند الفهرس 2 داخل مصفوفة lessons دون تعديل الأصل؟
دمج الشطر الأول slice(0, 2) ثم العنصر الجديد ثم الشطر المتبقي slice(2) ينشئ مصفوفة جديدة بالترتيب المطلوب.
داخل دالة map() يُسمح بتعديل item.qty مباشرةً لأن map تنشئ مصفوفة خارجية جديدة على أي حال.
خطأ؛ فالكائنات الداخلية ما زالت تشترك في المرجع مع اللقطة السابقة، لذا يجب نسخ الكائن المعدل بمعامل الانتشار أيضاً.
ماذا يحدث عند كتابة الخطأ الشائع setItems(items.push(newItem))؟
تعدّل push المصفوفة وتعيد طولها الرقمي الجديد مثل 4، فتستبدل حالة المصفوفة برقم وتتعطل الواجهة!
حذف عناصر القائمة اعتماداً على معرّف فريد ثابت id بدلاً من الفهرس يمنع أخطاء الإزاحة عند الترتيب أو التصفية.
صواب؛ فالمعرّف الثابت يحدد العنصر بدقة مهما تغير ترتيبه على الشاشة.
أي زوج مما يلي يضم حصرياً دوال مصفوفات نقية آمنة لتحديث الحالة في React؟
كلتا الدالتين filter() وslice() تعيدان مصفوفات جديدة دون أي تعديل للمصفوفة الأصلية.