Réagir cycle de vie des composants

Dans ce chapitre, nous allons discuter du cycle de vie des composants React.

Le cycle de vie d'un composant peut être divisé en trois états:

• Montage: true DOM a été inséré
• Mise à jour: être re-rendu
• Démonter: true DOM a été supprimé

Le procédé de la durée de vie sont les suivants:

• componentWillMount avant de rendre l'appel, le service côté client également.

• componentDidMount: après le premier appel à rendre seul le client.Après le composant a été généré la structure DOM correspondant, peut être consulté par this.getDOMNode (). Si vous souhaitez utiliser avec d'autres frameworks JavaScript, vous pouvez appeler cette méthode setTimeout, setInterval ou envoyer des requêtes AJAX, etc. (différentes opérations unitaires pour empêcher l'interface de blocage).

• componentWillReceiveProps est appelée lorsque le composant reçoit une nouvelle prop.Cette méthode ne sera pas appelée lors de l'initialisation de rendu.

• shouldComponentUpdate renvoie une valeur booléenne.Elle est appelée lorsque le composant reçoit de nouveaux accessoires ou état. Il est pas appelé lors de l'initialisation ou utiliser forceUpdate.
  Il peut être utilisé lorsque vous ne devez confirmer les composants mis à jour.

• componentWillUpdate dans le composant reçoit de nouveaux accessoires ou Etat , mais n'a pas rendu est appelé.Il ne sera pas appelée lors de l'initialisation.

• Après la mise à jour est un composantde componentDidUpdate complet appelé immédiatement.Il ne sera pas appelée lors de l'initialisation.

• componentWillUnmount immédiatement appelé lorsque le composant est retiré du DOM.

Une description détaillée de ces méthodes, vous pouvez vous référer à la documentation officielle .

Les exemples suivants Après composants Hello sont chargés, fixé par une méthode de minuterie componentDidMount chaque composante de remise à zéro 100 millisecondes de transparence et de re-rendu:

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

Essayez »

Les exemples suivants sont initialisésétat, setNewnumberpour mettre à jour l'état.Toutes les composantes du cycle de viedu contenu.

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

Essayez »