سجل التعديلات

الفرق مقارنةً بالنسخة السابقة

+ **React** مكتبة لبناء واجهات المستخدم من **مكونات** (components): دوال تستقبل خصائص (props) وتعيد وصفاً للواجهة بصيغة JSX. عندما تتغير البيانات تعيد React رسم الأجزاء المتأثرة فقط.
  
+ ## مكون بسيط
+ 
+ ```jsx
+ function Greeting({ name }) {
+   return <p>مرحباً {name}</p>;
+ }
+ 
+ export default function App() {
+   return <Greeting name="ليلى" />;
+ }
+ ```
+ 
+ ## الحالة (State)
+ 
+ ```jsx
+ import { useState } from 'react';
+ 
+ function Counter() {
+   const [count, setCount] = useState(0);
+   return <button onClick={() => setCount((c) => c + 1)}>نقرت {count} مرة</button>;
+ }
+ ```
+ 
+ لا تعدّل الحالة مباشرة؛ استدعِ دالة التحديث دائماً، واستخدم الصيغة الدالية `c => c + 1` عندما تعتمد القيمة الجديدة على السابقة.
+ 
+ ## القوائم والمفاتيح
+ 
+ ```jsx
+ <ul>
+   {todos.map((t) => <li key={t.id}>{t.text}</li>)}
+ </ul>
+ ```
+ 
+ المفتاح `key` يجب أن يكون ثابتاً وفريداً بين العناصر الشقيقة (مثل معرف من قاعدة البيانات)، لا رقم الفهرس إذا كان ترتيب القائمة يتغير.
+ 
+ ## التأثيرات (Effects)
+ 
+ `useEffect` لمزامنة المكون مع نظام خارجي (اشتراك، مؤقت، واجهة متصفح):
+ 
+ ```jsx
+ useEffect(() => {
+   const id = setInterval(tick, 1000);
+   return () => clearInterval(id);   // التنظيف عند الإزالة أو قبل التشغيل التالي
+ }, []);
+ ```
+ 
+ لا تحتاج تأثيراً لحساب قيمة مشتقة من الحالة أو الخصائص؛ احسبها مباشرة أثناء الرسم.
+ 
+ ## قواعد الخطافات (Hooks)
+ 
+ - استدعِ الخطافات في المستوى الأعلى للمكون فقط، لا داخل شروط أو حلقات.
+ - استدعِها من مكونات React أو من خطافات مخصصة فقط.
+ 
+ ## أخطاء شائعة
+ 
+ - تعديل مصفوفة أو كائن في الحالة مباشرة (`items.push`) بدل إنشاء نسخة جديدة.
+ - نسيان مصفوفة الاعتماديات أو إغفال قيم مستخدمة داخل التأثير.
+ - تخزين قيم مشتقة في حالة منفصلة فتخرج عن التزامن.