freeCodeCamp/guide/arabic/react/react-props-state/index.md

title	localeTitle
React Props and State	رد فعل الدعائم والدولة

الدعائم والدولة

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

الدعائم

يمكن تخصيص معظم المكونات بمعلمات مختلفة عند إنشائها. تسمى هذه المعلمات إنشاء props .

يمكن للمكونات الخاصة بك أيضا استخدام الدعائم. يتيح لك ذلك إنشاء مكون واحد يتم استخدامه في العديد من الأماكن المختلفة في تطبيقك ، مع خصائص مختلفة قليلاً في كل مكان. ارجع إلى this.props في وظيفة العرض:

`class Welcome extends React.Component { render() { return

Hello {this.props.name}

; } }

const element = ; `

ينشئ السطر <Welcome name="neel" /> اسم خاصية بقيمة "neel" .

يتم تمرير الخاصية إلى المكون ، تشبه كيفية تمرير وسيطة إلى دالة. في الواقع ، يمكننا حتى إعادة كتابة المكون ليكون أكثر بساطة:

function Welcome(props) { return <h1>Hello {props.name}</h1>; }

يمكننا جعل خاصية الاسم اختيارية بإضافة defaultProps إلى فئة الترحيب:

`class Welcome extends React.Component { render() { return

Hello {this.props.name}

; } }

Welcome.defaultProps = { name: "world", }; `

إذا تم استدعاء Welcome بدون اسم ، فسيتم عرض <h1> Hello world</h1> .

يمكن أن تأتي props من الأصل ، أو يمكن تعيينها بواسطة المكون نفسه.

لقد اعتدت أن تكون قادرًا على تغيير الدعامات باستخدام setProps و replaceProps ولكن تم إهمالها . خلال دورة حياة المكون ، يجب ألا تتغير الدعامات (اعتبرها غير قابلة للتغيير).

بما أن الدعائم يتم تمريرها ، ولا يمكن تغييرها ، يمكنك التفكير في أي مكون React الذي يستخدم فقط الدعائم (وليس الحالة) على أنها "نقية" ، أي أنه سيؤدي دائمًا إلى تقديم نفس المخرجات وفقًا للإدخال نفسه. هذا يجعلها سهلة الاختبار.

حالة

مثل props ، تحمل state معلومات حول المكون. ومع ذلك ، يختلف نوع المعلومات وكيفية التعامل معها.

بشكل افتراضي ، لا يحتوي أي مكون على حالة. عنصر Welcome من الأعلى عديم الحالة:

function Welcome(props) { return <h1>Hello {props.name}</h1>; }

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

سنعمل مع مكون بسيط إلى حد ما لرؤية state تعمل في العمل. لدينا زر يتتبع عدد المرات التي نقرت فيها.

هنا الرمز:

`class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; }

updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }); }

render() { return (<button onClick={() => this.updateCount()} > Clicked {this.state.count} times ); } } `

يتم إنشاء الحالة في المكون

دعونا ننظر إلى طريقة constructor :

constructor() { super(); this.state = { count: 0, }; }

هذا هو المكان الذي تحصل فيه الدولة على بياناتها الأولية. يمكن أن تكون البيانات الشفوية مشفرة بشكل صارم (على النحو الوارد أعلاه) ، ولكنها يمكن أن تأتي أيضًا من props .

state قابلة للتغيير

إليك طريقة updateCount :

updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }); }

نقوم بتغيير الحالة لتتبع إجمالي عدد النقرات. الشيء المهم هو setState. أولا ، لاحظ أن setState يأخذ وظيفة ، وهذا لأنه يمكن تشغيل setState بشكل غير متزامن. يجب أن تأخذ وظيفة رد اتصال بدلاً من تحديث الحالة مباشرة. يمكنك أن ترى أن لدينا إمكانية الوصول إلى prevState داخل معاودة الاتصال ، سيحتوي ذلك على الحالة السابقة ، حتى إذا كانت الولاية قد تم تحديثها بالفعل في مكان آخر.

الرد يخطو خطوة واحدة نحو أفضل، setState بتحديث state الكائن وإعادة يجعل-المكون التلقائى.

تحذيرات state

من المغري كتابة هذا this.state.count = this.state.count + 1 .

لا تفعل هذا React لا يمكن الاستماع إلى حالة الحصول على تحديث بهذه الطريقة ، لذلك لن إعادة تقديم المكون الخاص بك. دائما استخدام setState .

قد يكون من المغري أيضًا كتابة شيء كهذا:

// DO NOT USE this.setState({ count: this.state.count + 1 });

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

تابع البرنامج !!!

وأخيرا ، render

render() { return (<button onClick={() => this.updateCount()} > Clicked {this.state.count} times </button>); }

onClick={() => this.updateCount()} يعني أنه عند النقر فوق الزر سيتم استدعاء أسلوب updateCount. نحتاج إلى استخدام وظيفة السهم ES6 حتى يتمكن updateCount من الوصول إلى حالة هذا المثيل.

يتم عرض النص الذي تم Clicked {this.state.count} times في الزر Clicked {this.state.count} times ، والذي سيستخدم أيًا من هذا التاريخ.الجملة في وقت التقديم.

مزيد من المعلومات حول: رد فعل الدعائم والدولة