ليه الـ props في React تبقى unchangeable ?
محتاجين الأول نفهم إن ال data flow في ريـأكت بتكون Unidirectional Data Flow يعني البيانات بتتنقل في اتجاه واحد من ال parent component لل child وكون الـ props تبقى Immutable دا له أسبابه في ريأكت مش معمول عبثي عشان ال stability وال preformance وال Consistency تعال نوضح مع بعض حاجتين بيتحققوا نتيجة الكلام دا
- 1.Single Source of Truth
في React، مفهوم Single Source of Truth معناه إن كل البيانات بتكون managed in one central place اللي هو parent component وبيحصلها passed down as immutable props to its child components.
- 2. Predictability
لما الداتا اللي بيحصلها passed down تكون immutable دا بيأكد إن ال child component ميقدرش يغير أو يتحكم ف الداتا ، ال immutability هنا بتضمن إن ميحصلش أي تصرف أو تغيير عبثي ف دا بيضمنلي إن ميحصلش Render طالما ال props متغيرتش
ف بالتالي دا بيضمنلي إني أmanage ال behaviour بتاع الcomponent وأتحكم ف أل re render ودا بيوصلني ل Efficient Re-rendering بيقدر يعرف إمتى ي (re-render) بكفاءة أكبر لما البيانات ثابتة، وده بيحسن الأداء.
إزاي الـ props بقت Immutable في JavaScript ?
props are passed as values, not references فبالتالي أي محاولة عشان ت modify ال props
مش هت affect علي الstate of the parent component , ملهاش علاقة ب Object.freeze()
تعال بقي أصدمك شوية
في JavaScript، مفهوم الـ "immutability" للـ props في React بيتم تحقيقه بشكل أساسي عن طريق (convention) بدلاً من (language constraints)
خليني أوضح النقطة دي بالتفصيل
في React، المفهوم الأساسي هو إن الـ props يجب أن تكون غير قابلة للتغيير (immutable). يعني إنه ممنوع تعدل في الـ props اللي بتستلمها في الـ child component. دا مش بيتم فرضه من خلال JavaScript نفسها، لكن هو جزء من فلسفة React.
القيم البسيطة (Primitive Values): في JavaScript، ازي الأرقام و(strings) بتتبعت كقيم (by value). يعني لما تعدي رقم أو نص كـ prop، بيتم نسخ القيمة، وبالتالي مش ممكن تغييرها يؤثر على الأصل في الـ parent component.
ال(Objects) وال(Arrays): بتتبعت كمراجع (by reference). يعني لما تعديهم ك prop، الـ child component بيستلم (reference) لنفس الObjects في الذاكرة. وده يعني إنه ممكن يغير في محتواه. يعني من الأخر الـ props في React بتعتبر immutable بناءً على convention بنلتزم بيه كـ مطورين مش constrain من اللغة .