web-dev-qa-db-fra.com

Quel est le but d'avoir des fonctions comme composantWillMount dans React.js?

J'ai écrit des composants dans React.js récemment. Je n'ai jamais eu à utiliser des méthodes telles que componentWillMount et componentDidMount.

render est indispensable. getInitialState et les autres méthodes d'aide que j'ai écrites sont également utiles. Mais pas les deux méthodes de cycle de vie susmentionnées.

Ma conjecture actuelle est qu'ils sont utilisés pour le débogage? Je peux console.log à l'intérieur d'eux: 

componentWillMount: function() {
  console.log('component currently mounting');
},

componentDidMount: function() {
  console.log('component has mounted');
}

Y a-t-il d'autres utilisations?

javascriptuser-interfacereactjsfrontendreact-jsx
22
Adi Sivasankaran

componentDidMount est utile si vous souhaitez utiliser des plugins JavaScript non-React. Par exemple, il manque un bon sélecteur de date dans React. Pickaday est belle et ça marche tout simplement hors de la boîte. Donc, mon composant DateRangeInput utilise maintenant Pickaday pour la saisie de la date de début et de fin et je l’ai raccordé comme suit:

  componentDidMount: function() {
    new Pikaday({
      field: React.findDOMNode(this.refs.start),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeStart
    });

    new Pikaday({
      field: React.findDOMNode(this.refs.end),
      format: 'MM/DD/YYYY',
      onSelect: this.onChangeEnd
    });
  },

Le DOM doit être rendu pour que Pikaday puisse s'y connecter et le hook componentDidMount vous permet de vous connecter à cet événement exact.

componentWillMount est utile lorsque vous souhaitez effectuer une opération par programme juste avant le montage du composant. Un exemple dans une base de code sur laquelle je travaille est un mixin qui contient un tas de code qui serait autrement dupliqué dans un certain nombre de composants de menu différents. componentWillMount est utilisé pour définir l'état d'un attribut partagé spécifique. Une autre façon dont componentWillMount pourrait être utilisé consiste à définir un comportement du composant ramifié par prop (s):

  componentWillMount() {
    let mode;
    if (this.props.age > 70) {
      mode = 'old';
    } else if (this.props.age < 18) {
      mode = 'young';
    } else {
      mode = 'middle';
    }
    this.setState({ mode });
  }
24
Cymen

componentDidMount ne s'exécute qu'une fois et côté client. Ceci est important, surtout si vous écrivez une application isomorphe (qui s'exécute à la fois sur le client et sur le serveur). Vous pouvez utiliser composantDidMount pour effectuer des tâches nécessitant que vous ayez accès à window ou au DOM.

De la page de réaction de Facebook 

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

componentWillMount a moins de cas d'utilisation (je ne l'utilise pas vraiment), mais il diffère par le fait qu'il fonctionne à la fois du côté client et du côté serveur. Vous ne voulez probablement pas placer ici des écouteurs d'événement ou des manipulations DOM, car le système tentera de s'exécuter sur le serveur sans raison.

4
Jon

Dans mon projet qui est un outil de tableau de bord, j'ai utilisé composantDidMount ().

Sur la page d'accueil, les tableaux de bord précédemment enregistrés apparaissent dans la barre latérale. Je passe un appel ajax dans composantDidMount () de la page de rendu du composant, afin d'extraire la liste des tableaux de bord de manière asynchrone après le rendu de la page.

0
Shubham Séthi

Voici un exemple d'application Web isomorphe utilisant componentWillMount: https://github.com/coodoo/react-redux-isomorphic-example

Cependant, je suis certain à 99% qu'il exécute le code dans componentWillMount sans raison du côté serveur (je pense que l'utilisation de componentDidMount pour s'assurer qu'il était exécuté uniquement du côté client aurait été plus logique), car le code qui garantit que les promesses d'extraction sont remplies avant de rendre la page est dans server.js pas dans les composants individuels.

Vous trouverez une discussion sur l'extraction asynchrone par composant ici: https://github.com/facebook/react/issues/1739 Autant que je sache, il n'y a pas de bonne utilisation pour componentWillMount en ce qui concerne l'isomorphisme est concerné au moins.

0
dpwrussell