الدعائم مقابل الحالة في React

ما الفرق بين الحالة والدعامات في React؟

في مكون React ،الدعائمهي المتغيرات التي تم تمريرها إليها من خلال مكونها الأصلي.حالةمن ناحية أخرى ، لا تزال متغيرات ، ولكن تمت تهيئتها وإدارتها بشكل مباشر بواسطة المكون.

يمكن تهيئة الحالة بواسطة الدعائم.

على سبيل المثال ، قد يشتمل المكون الرئيسي على مكون فرعي عن طريق الاتصال

<ChildComponent />

يمكن للوالد تمرير خاصيّة باستخدام بناء الجملة التالي:

<ChildComponent color=green />

داخل مُنشئ ChildComponent ، يمكننا الوصول إلى الخاصية:

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

ويمكن لأي طريقة أخرى في هذه الفئة الرجوع إلى الدعائم باستخدامthis.props.

يمكن استخدام الدعائم لتعيين الحالة الداخلية بناءً على قيمة الخاصية في المُنشئ ، مثل هذا:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

بالطبع يمكن للمكون أيضًا تهيئة الحالة دون النظر إلى الخاصيات.

في هذه الحالة ، لا يوجد شيء مفيد يحدث ، ولكن تخيل القيام بشيء مختلف بناءً على قيمة prop ، ربما يكون تحديد قيمة الحالة هو الأفضل.

لا يجب تغيير الدعائم مطلقًا في المكون الفرعي ، لذلك إذا حدث شيء ما يغير بعض المتغيرات ، فيجب أن ينتمي هذا المتغير إلى حالة المكون.

تُستخدم الدعائم أيضًا للسماح للمكونات الفرعية بالوصول إلى الطرق المحددة في المكون الرئيسي. هذه طريقة جيدة لمركزية إدارة الدولة في المكون الرئيسي ، وتجنب الأطفال أن يكون لديهم حاجة إلى حالتهم الخاصة.

ستعرض معظم مكوناتك فقط نوعًا من المعلومات بناءً على الدعائم التي تلقوها ، وتبقىعديم الجنسية.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: