شرح صفوف ومحتوى الفقرة
يتكامل نقاء المكونات مع معمارية تدفق البيانات أحادي الاتجاه (One-Way Data Flow)؛ حيث تستقر البيانات في المكون الأب المالك وتنساب تنازلياً باتجاه واحد كخصائص للقراءة فقط نحو الأبناء. وعندما يحتاج مكون فرعي لترتيب قائمة قادمة من الأب للعرض، ينشئ نسخة أولاً عبر [...items].sort(...) دون المساس بترتيب مصفوفة الأب الأصلية.
HTML
function Leaderboard({ scores }) {
const copy = [...scores];
copy.sort((a, b) => b.points - a.points);
return (
<ol className="rx-card">
{copy.map((s) => (
<li key={s.id}>{s.team}: {s.points}</li>
))}
</ol>
);
}