الرد دورة حياة المكونة

في هذا الفصل سوف نناقش دورة حياة تتفاعل المكونات.

ويمكن تقسيم دورة حياة عنصر في ثلاث ولايات:

• تصاعد: لقد تم إدراج DOM صحيح
• تحديث: يعاد تقديمها،
• غير متزايد: تمت إزالة DOM صحيح

طريقة دورة حياة هم:

• componentWillMount قبل تقديم الدعوة، وخدمة العميل أيضا.

• componentDidMount: بعد الدعوة الأولى لتقديم العميل فقط.بعد أن تم إنشاء عنصر هيكل DOM المقابلة، يمكن الوصول إليها من خلال this.getDOMNode (). إذا كنت ترغب في استخدام مع الأطر جافا سكريبت أخرى، يمكنك استدعاء هذا الأسلوب setTimeout، setInterval أو إرسال طلبات أجاكس، وما إلى ذلك (وحدة العمليات المختلفة لمنع واجهة المستخدم حجب).

• ويسمىcomponentWillReceiveProps عندما يتلقى مكون دعامة جديدة.لن يتم استدعاء هذا الأسلوب أثناء التهيئة تقديم.

• shouldComponentUpdate بإرجاع قيمة منطقية.ويطلق عليه عندما يتلقى عنصر الدعائم الجديدة أو الدولة. لا يتعين عليها التهيئة أو استخدام forceUpdate.
  ويمكن استخدامه عندما لا تحتاج إلى تأكيد المكونات المحدثة.

• componentWillUpdate في عنصر يتلقى الدعائم الجديدة أو الدولة ولكن ليس لديه ما يسمى تقديم.لن يتم استدعاؤه أثناء التهيئة.

• بعد التحديث المكونcomponentDidUpdate الكامل دعا على الفور.لن يتم استدعاؤه أثناء التهيئة.

• componentWillUnmount دعا على الفور عند إزالة المكون من DOM.

وصف مفصل لهذه الأساليب، يمكنك الرجوع إلى الوثائق الرسمية .

يتم تحميل الأمثلة التالية بعد مكونات مرحبا، التي وضعتها طريقة الموقت componentDidMount كل عنصر إعادة تعيين 100 مللي ثانية الشفافية وإعادة التقديم:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

محاولة »

يتم تهيئة الأمثلة التاليةدولة، setNewnumberلتحديثالدولة.جميع مكونات دورة حياةالمحتوى.

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECIEVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

محاولة »