بالتأكيد! دعونا نتعمق أكثر في الدعائم والحالة في React، ونستكشف أدوارها، وكيف تختلف، ونقدم أمثلة أكثر تفصيلاً.

الدعائم (الخصائص)

1. التعريف: الدعائم هي اختصار للخصائص. إنها طريقة لتمرير البيانات من مكون إلى آخر، عادةً من مكون أصلي إلى مكون فرعي.

2. صفات:

للقراءة فقط: بمجرد التعيين، لا يمكن للمكون الفرعي تعديل دعائمه. فهي غير قابلة للتغيير داخل المكون الفرعي.
تستخدم للتكوين: تسمح لك الدعائم بتخصيص سلوك ومظهر المكونات.
تدفق البيانات: تعمل الدعائم على تمكين تدفق البيانات والوظائف أسفل التسلسل الهرمي للمكونات، مما يعزز إمكانية إعادة الاستخدام.
3. الاستخدام: يمكنك تمرير أي نوع من البيانات من خلال الدعائم، بما في ذلك السلاسل والأرقام والكائنات والمصفوفات والوظائف.

مثال على الدعائم:

// ParentComponent.js
function ParentComponent() {
  const message = "Hello, Child!";

  return ;
}

// ChildComponent.js
function ChildComponent(props) {
  return 
{props.greeting}
;
}

في هذا المثال:

• يقوم ParentComponent بتمرير السلسلة "Hello, Child!" إلى ChildComponent من خلال دعامة تسمى التحية.
• يتلقى ChildComponent هذه الخاصية ويعرضها في علامة

  .

ولاية

1. التعريف: الحالة هي كائن React مضمن يحتوي على معلومات حول الحالة الحالية للمكون. على عكس الدعائم، تتم إدارة الحالة داخل المكون نفسه.

2. صفات:

قابل للتغيير: يمكن تغيير الحالة باستخدام وظائف مثل setState (لمكونات الفئة) أو ربط useState (للمكونات الوظيفية).
محلي للمكون: الحالة خاصة بالمكون حيث تم تعريفه ولا يمكن الوصول إليها من المكونات الأخرى ما لم يتم رفعها.
التفاعل: تؤدي التغييرات في الحالة إلى إعادة عرض المكون، مما يسمح بإجراء تحديثات ديناميكية في واجهة المستخدم.
3. الاستخدام: تُستخدم الحالة بشكل شائع لإدارة إدخال المستخدم، وتتبع حالة المكون، والاستجابة لتفاعلات المستخدم.

مثال للحالة:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

في هذا المثال:

• يحتفظ مكون العداد بحالته الخاصة التي تسمى العد، والتي تتم تهيئتها إلى 0.
• عند النقر على الزر، تقوم الدالة setCount بتحديث حالة العد، مما يتسبب في إعادة عرض المكون وعرض العدد الجديد.

ملخص

• الدعائم مخصصة لتمرير البيانات إلى شجرة المكونات وهي للقراءة فقط. فهي تساعد في إنشاء مكونات قابلة لإعادة الاستخدام ويمكن تخصيصها.
• الحالة مخصصة لإدارة الحالة الداخلية للمكون ويمكن تحديثها، مما يؤدي إلى سلوك ديناميكي وعرض.

يعد فهم الفرق بين الدعائم والحالة أمرًا ضروريًا لبناء تطبيقات React فعالة ومنظمة. إذا كان لديك المزيد من الأسئلة أو كنت بحاجة إلى مزيد من التوضيح بشأن أي جزء، فلا تتردد في طرحها!