في إطار العمل React لدينا مصطلحان شائعان هما State وProps فما هما وما الفرق بينهما؟

الـ Props هي القيم التي تمررها المكونات اﻵباء (Parents) إلى المكونات اﻷبناء (Children)، وأمّا الـ State فهي متغيرات يتم تمهيد قيمها (initialized) وإدارتها مباشرة بواسطة المكون ذاته، إنها مملوكة للمكوّن الذي عُرّفت فيه.

شاهد هنا عندما نقوم داخل المكون اﻷب (Parent Components) باستدعاء المكون ChildComponent، لاحظ أن المكون اﻷب أرسل خاصية prop اسمها color وقيمتها green إلى ابنه:

<ChildComponent color='green' />

وعليه، فإننا نستطيع في الـ ChildComponent الوصول إلى القيمة المُتلقاة كما يلي:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

القدرة على التعديل

تُعرف الـ State بأنها قيم قابلة للتعديل (mutable)، وعليه فإنه يمكن التلاعب بها وتحديثها بأي شكل، فيما تعرف الـ Props بأنها قيم للقراءة فقط ولا يمكن تعديلها (Read-only) أو (immutable).

تسمى المكونات (Components) التي تتمتع بوجود حالات فيها (State) بأنها “المكونات ذاتُ الحالة” (Stateful Components)، وأما المكونات التي لا تتمتع بوجود حالات داخلها فهي “المكونات عديمة الحالة” (Stateless Components).

يُذكر أنه يمكنك تمرير الـ State كـ Prop إلى المكونات اﻷبناء، كما بالمثال التالي:

class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
color: 'green'
 }
render(){
return(
<ChildComponent color={this.state.color} />
 )
   }
}

من فضلك راجع درسنا أيضًا: الفرق بين Container Components و Presentational Components في React

[medium]