كيف تعمل الخصائص (props) والحالة (state) في React Native؟

Question

Accepted Answer

**الخصائص (Props)** و**الحالة (State)** هي مفاهيم أساسية في React تعمل بنفس الطريقة في React Native: **الخصائص (Props)** تمرر البيانات إلى المكون (مدخلات للقراءة فقط)، بينما **الحالة (State)** تحتفظ بالبيانات التي يمكن أن تتغير بمرور الوقت (مما يؤدي إلى إعادة تصيير). فهم هذين المفهومين أساسي وضروري. ## الخصائص (Props) — البيانات المُمررة (للقراءة فقط) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## الحالة (State) — البيانات التي تتغير (عبر useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` الحالة هي بيانات داخلية قابلة للتغيير؛ تحديثها (عبر الدالة الراجعة من `useState`) يؤدي إلى إعادة تصيير — وهذه هي الطريقة التي تعكس بها واجهة المستخدم التغييرات. ## الخصائص مقابل الحالة ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## لماذا هذا مهم فهم الخصائص والحالة أساسي في React Native لأنها **مفاهيم أساسية في React مركزية لكيفية عمل المكونات وكيفية تحديث واجهات المستخدم**، لذا فهي معرفة ضرورية يجب إتقانها. **الخصائص (Props)** (بيانات للقراءة فقط تُمرر إلى المكون من المكون الأب، تتدفق لأسفل شجرة المكونات) هي الطريقة التي يتلقى بها المكون التكوين والبيانات من الخارج، مما يُمكِّن المكونات القابلة لإعادة الاستخدام والقابلة للتركيب. **الحالة (State)** (بيانات داخلية قابلة للتغيير يتم إدارتها عبر خطاف `useState`، حيث يؤدي تحديثها إلى إعادة تصيير) هي كيفية احتفاظ المكونات بالبيانات والاستجابة للبيانات التي تتغير بمرور الوقت (إدخال المستخدم، التبديلات، البيانات المجلوبة) — الآلية التي تعكس بها واجهات المستخدم التغييرات. فهم **الفرق** — الخصائص المُمررة للقراءة فقط (للبيانات والتكوين الخارجي) مقابل الحالة التي تكون داخلية وقابلة للتغيير (للبيانات التي تتغير، وتدفع إعادة التصيير) — والمبدأ القائل بأن **البيانات تتدفق لأسفل عبر الخصائص بينما تغييرات الحالة تدفع تحديثات واجهة المستخدم** أساسي لبناء تطبيقات React Native (و React) بشكل صحيح. هذه هي بالضبط نفس مفاهيم React للويب، لذا فإن فهمها ينتقل بشكل مباشر وضروري لأي شخص يبني مكونات React Native. الحصول على الخصائص والحالة الصحيحة (تمرير البيانات عبر الخصائص، إدارة البيانات المتغيرة مع الحالة، فهم تدفق البيانات أحادي الاتجاه) هو أساسي لمكونات وظيفية وصحيحة. نظراً لأن الخصائص والحالة مركزية لكيفية عمل مكونات React Native (و React) — استقبال البيانات (الخصائص) وإدارة التغيير (الحالة) لدفع تحديثات واجهة المستخدم — وفهمها أساسي لبناء أي تطبيق React Native بشكل صحيح، فإن فهم الخصائص والحالة ضروري وأساسي في معرفة React Native — مفاهيم أساسية يجب على كل مطور React Native أن يفهمها، متطابقة مع React للويب (بحيث تنتقل المعرفة)، وأساسية لبناء مكونات تستقبل البيانات وتستجيب للتغيير، والآليات الأساسية لتطوير واجهات مستخدم React Native.