Reagieren Komponente Lebenszyklus

In diesem Kapitel werden wir den Lebenszyklus reagieren Komponenten diskutieren.

Der Lebenszyklus einer Komponente kann in drei Zustände unterteilt werden:

• Montage: true DOM eingefügt wurde
• Aktualisierung: wird neu gerendert
• Aushängen: true DOM wurde entfernt

Das Verfahren des Lebenszyklus sind:

• componentWillMount , bevor der Anruf - Rendering, die clientseitige Service auch.

• componentDidMount: nach dem ersten Anruf nur den Client zu machen.Nachdem die Komponente DOM-Struktur erzeugt wurde, entspricht, kann durch this.getDOMNode zugegriffen werden (). Wenn Sie mit anderen JavaScript-Frameworks verwenden möchten, können Sie diese Methode setTimeout nennen, setInterval oder AJAX Anfragen senden usw. (andere Einheit zur Sperrung des UI zu verhindern).

• componentWillReceiveProps wird aufgerufen , wenn die Komponente eine neue prop empfängt.Diese Methode wird während der Initialisierung nicht machen aufgerufen werden.

• shouldComponentUpdate gibt einen Booleschen Wert.Es wird aufgerufen, wenn die Komponente neue Requisiten oder Staat erhält. Es wird nicht bei der Initialisierung oder verwenden Forceupdate genannt.
  Es kann verwendet werden, wenn Sie nicht die aktualisierten Komponenten bestätigen müssen.

• componentWillUpdate in der Komponente erhält neue Requisiten oder Staat hat aber keine genannt render wird.Es wird nicht bei der Initialisierung aufgerufen werden.

• Nach dem Update abgeschlossen ist sofort genanntcomponentDidUpdate Komponente.Es wird nicht bei der Initialisierung aufgerufen werden.

• componentWillUnmount sofort aufgerufen , wenn die Komponente aus dem DOM entfernt wird.

Eine detaillierte Beschreibung dieser Methoden ist , können Sie sich auf der offiziellen Dokumentation .

Die folgenden Beispiele Nachdem Hallo Komponenten geladen werden, gesetzt durch einen Timer componentDidMount Methode alle 100 Millisekunden Transparenz Reset-Komponente und Re-Rendering:

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
);

Versuchen »

Die folgenden Beispiele werden initialisiertenZustand, setNewnumberfürZustandzuaktualisieren.Alle LebenszyklusInhalt Komponente.

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')
);

Versuchen »