الرد مكون API

في هذا القسم سوف نناقش تتفاعل API المكون. سوف نشرح الطرق السبعة التالية:

• تغيير الحالة: setState
• استبدال الحالة: replaceState
• إعداد خصائص setProps
• استبدال replaceProps الملكية
• تحديث: forceUpdate
• الحصول على DOM عقدة: findDOMNode
• تحليل مكونات الدولة التي شنت: isMounted

تغيير الحالة: setState

setState(object nextState[, function callback])

المعلمة الوصف

• nextState، الدولة الجديدة التي سيتم تحديدها، ووضع ودمج الدولة الحالي
• رد، المعلمات الاختيارية، وظيفة رد الاتصال. وسيتم توفير هذه الوظيفة في نجاح setState دعا بعد تجميع إعادة تقديم.

دمج nextState والحالة الراهنة، وجعل إعادة المكون. setState هي رد فعل أسلوب معالج الحدث وطلب أثارت الرئيسية ظيفة رد تحديث واجهة المستخدم.

حول setState

لا يمكنك تعديل المكونات الداخلية التي كتبها this.state الدولة، لأن الدولة سوف تحل محل setState دعوة () بعد.

setState () لا يغير this.state على الفور، ولكن سريعا على خلق معاملة الدولة. setState () لم يتم مزامنة بالضرورة من أجل تعزيز الأداء سيكون رد فعل دولة التنفيذ دفعة وDOM التقديم.

setState () يطلق دائما جمعية إعادة رسم، ما لم عددا من الشروط لتحقيق shouldComponentUpdate () في تقديم المنطق.

أمثلة

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

محاولة »

أمثلة عن طريق النقر على علامات H2 لجعل عداد يتزايد.

استبدال الحالة: replaceState

replaceState(object nextState[, function callback])

• nextState، سيتم تعيين الدولة الجديدة، والتي سوف تحل محل الوضع الحالي للدولة.
• رد، المعلمات الاختيارية، وظيفة رد الاتصال. وسيتم توفير هذه الوظيفة في replaceState ناجحة دعا بعد تجميع إعادة تقديم.

replaceState () طريقة setState () هو ما شابه ذلك، ولكن الطريقة تبقى فقط دولة nextState، الحالة الأصلية ليست سيتم حذف وضع nextState.

خصائص الإعداد: setProps

setProps(object nextProps[, function callback])

• nextProps، سيتم تعيين الخاصية الجديدة، والوضع الراهن من الدعائم الاندماج
• رد، المعلمات الاختيارية، وظيفة رد الاتصال. وسيتم توفير هذه الوظيفة في setProps ناجحة دعا بعد تجميع إعادة تقديم.

إعداد خصائص عنصر، وإعادة تقديم مكون.

تدفق البيانات الدعائم مكونات معادلة، وسوف يكون دائما تنتقل من الأم إلى جميع مكونات فرعية التجمع. عندما يكون جافا سكريبت الخارجية والتكامل التطبيق، ونحن قد تحتاج لتمرير البيانات إلى عنصر أو تلاحظ React.render () عناصر تحتاج إلى إعادة تقديم، يمكنك استخدام setProps ().

تحديث React.render عنصر يمكن أن أدعو مرة أخرى على العقدة () ليكون () طريقة لتغيير خصائص المكون من setProps، الزناد إعادة تقديم مكون.

استبدال السمة: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps، وخاصية جديدة إلى أن يتم تعيين، وهذا العقار محل الدعائم الحالية.
• رد، المعلمات الاختيارية، وظيفة رد الاتصال. وسيتم توفير هذه الوظيفة في replaceProps ناجحة دعا بعد تجميع إعادة تقديم.

replaceProps () الأسلوب هو setProps ما شابه ذلك، ولكن سيتم حذف الأصلي

props

تحديث: forceUpdate

forceUpdate([function callback])

المعلمة الوصف

• رد، المعلمات الاختيارية، وظيفة رد الاتصال. سيتم استدعاء هذه الدالة بعد المكون تقديم () استدعاء الأسلوب.

forceUpdate () طريقة يتسبب المكون الذي يطلق على نفسه تقديم طريقة () لإعادة تقديم المكون الفرعي التجمع، فإن عنصر الاتصال الخاصة بك تقديم (). ومع ذلك، عند تجميع إعادة تقديم، ولا يزال يقرأ this.props this.state، إذا لم تتغير الدولة، ثم تتفاعل المحدثة فقط DOM.

forceUpdate () طريقة غير مناسبة لthis.props خارج ورسم this.state المكونات (مثل: التغيرات this.state بعد)، التي تبلغها طريقة تتفاعل الدعوة تجعل ()

بشكل عام، يجب تجنب استخدام forceUpdate ()، وقراءة فقط this.props وthis.state الدولة الناجمة عن رد الفعل تقديم () يدعو.

الحصول على DOM عقدة: findDOMNode

DOMElement findDOMNode()

• عودة القيمة: DOM عنصر DOMElement

إذا كان قد تم تركيبه عنصر إلى DOM، والأسلوب بإرجاع متصفح المحلي عناصر DOM المقابلة. عندما تجعل عودة باطلة أو خاطئة عندما this.findDOMNode () سيعود لاغية. قراءة من قيمة DOM، وهذا النهج هو مفيد، مثل: يحصل على قيمة حقل النموذج والقيام ببعض التلاعب DOM.

تحليل مكونات الدولة التي شنت: isMounted

bool isMounted()

• إرجاع القيمة: صحيحة أو خاطئة، تشير إلى ما إذا تم تركيب مكون إلى DOM

يستخدم isMounted طريقة () لتحديد ما إذا كانت هي التي شنت على المكونات إلى DOM. يمكنك استخدام هذا الأسلوب للتأكد من أن الدعوة setState () وforceUpdate () في سيناريو غير متزامن لا يمكن أن تسوء.

هنا بالإشارة: HTTP: //itbilu.com/javascript/react/EkACBdqKe.html