ما هو الـProps؟ ما هي الحال (state)؟ هل يجب أن أستخدم props أو الحالة (state)؟ ما تأثير ذلك؟ ما الفرق بين props وstate؟
هل لديك هذا النوع من الأسئلة حين بدأت العمل بـReact؟ أجل؟
دعني أخبرك بشيء، هذه كلها أسئلة ذات صلة ووضوح، هذه المفاهيم سوف يُؤتي ثمارها على المدى البعيد أثناء العمل مع React.
هيا نبدأ بالأساسيات !
ما هي الـProps؟
- Props هي اختصار لـ Properties وتعني الخصائص.
- تسمح props بتمرير بيانات معينة لمكونات React.
مثال
في المثال أعلاه كل السمات مثل type, name, disabled هم عبارة عن props.
لماذا الـ props مهمين؟
يتم تكوين تطبيقات React عن طريق تجميع مكونات مختلفة.
هناك نوعان من المكونات
- المكونات التي تحدد الحالة (stateful) (مكونات الفئة (class))
- مكونات عديمة الحالة (stateless) (مكونات الدالة)
ولكن ماهي الحالة (state) ؟
الحالة هي متغير قريب يُستخدم للتواصل خلال المكونات.
بعد ذلك، تتلاعب مكونات stateful بهذه الحالة باستخدام SetState() لتعديل سلوك المكون.
على أي حال، عندما يتم تمرير هذه الحالة الداخلية إلى مكونات أخرى باستخدام props، فإنها تصبح مكون عديم الحالة (stateless).
مثال
في المثال أعلاه DisplayDetails هي مكون عديم الحالة (stateless)، والذي يتلقى بيانات معينة من خلال الـ props التالية firstName, lastName & city.
مكون الاستقبال أو التحية (Great component)، هو أيضاً مكون stateful، حيث يستخدم مكونات React لتخزين الاسم الذي تم تسجيله عن طريق onKeyPress ثم الوصول إليه من الحالة باستخدام this.state.name ليُحيي المستخدم.
إذاً بالنظر للمثال أعلاه يمكننا تلخيص الآتي:
تتيح لنا props بإنشاء مكونات عديمة الحالة (Stateless components)، والتي هي مكونات واجهة مستخدم صامتة.
تُستخدم الحالة (state) لإنشاء حاوية مكونات (Container Components)، أو Stateful Components، تقوم بإجراء معالجة بيانات إضافية والتحقق منها ثم يتم تمريرها إلى مكونات واجهة المستخدم الصامتة أو المكونات عديمة الحالة (stateless) للعرض.
إذاً ما الفرق بين الـ props والحالة (state)؟
الـProps ثابتة وغير قابلة للتغير، بينما الحالة (state) قابلة للتغير
- الـ props التي يتم تمريرها للمكون لا يمكن تغييرها، لأنها ثابتة.
- بينما حالة (state) المكون يمكن تغييرها عن طريق this.setState()، لأنها قابلة للتغير.
الحالة (state) يمكن استخدامها فقط في مكونات الفئة (class component)، بينما الـprops لا حدود لاستخدامها.
- الحالة (state) متوفرة فقط في مكون الفئة (class)، لأن هذا المكون يمتد أو يتبع لفئة المكون (Component class) من React مما يجعل حالة (state) الـ react متاحة للمكون.
- ومن ناحية أخرى، لا تتطلب الـprops مثل هذه الحاجة، ومن ثم يمكن إستخدامها مع مكونات الدالة أو الفئة (class).
يتم تعيين الـProps عن طريق المكون الأب، بينما الحالة (state) يتم تحديثها بشكل عام عن طريق معالجات الحدث (event handlers).
- كما ذكر سابقاً إذا كنا نريد مشاركة حالة (state) المكون، يجب أن نمرره كـProps، وبالتالي فإن الـprops دائماً يتم ضبطها حسب المكون الأب والذي يتم إستخدامه من قبل المكونات الفرعية.
- يتم تغيير حالة (state) المكون بشكل عام حين يتم إطلاق حدث (event) معين كما هو الحال على onKeyPress في المثال السابق.
الخاتمة
فهم كل شيء أعلاه هو شيء كبير تم إدراكه، لذا دعوني أساعدك في الحصول على بعض الأشياء التي يمكنك االرجوع إليها بسرعة
- الحالة (state) تُستخدم فقط في مكونات الفئة (class components).
- الحالة (state) يمكن تحديثها عن طريق استخدام دالة setState().
- الـ props يتم تمريرهم كسمات عن طريق مكونات الأب،إلى المكونات الفرعية أو الأبناء.
- قيمة الـprops يجب أن لا يتم تعديلها أبداً.
- يمكن استخدام الـProps في مكونات الفئة (class) ومكونات الدالة.
- أسماء الـProps يجب أن يتم اتباع تنسيق camelCase عند كتابتهم.
- دائماً يجب أن يكون لديك الحد الأدنى من مكونات stateful لتحسين الأداء.
