Pourquoi un composant React est rendu

existe-t-il une approche systématique pour déboguer ce qui cause un composant à un réémetteur dans React? J'ai mis une simple console.log () pour voir combien de temps il rend, mais j'ai de la difficulté à comprendre ce qui provoque le rendu du composant plusieurs fois I. e (4 fois) dans mon cas. Existe-t-il un outil qui affiche une ligne de temps et/ou tous les rendus et l'ordre des composants?

25
demandé sur jasan 2016-12-06 23:50:16
la source

4 ответов

voici quelques cas où un composant React va se re-rendre.

  • composant Parent rerender
  • appel this.setState() à l'intérieur du composant. Cela déclenchera les méthodes de cycle de vie des composants suivantes shouldComponentUpdate>componentWillUpdate > render>componentDidUpdate
  • changements dans les composants props. Cela va déclencher componentWillReceiveProps>shouldComponentUpdate>componentWillUpdate > render>componentDidUpdate (connect méthode react-redux déclenchez ceci lorsqu'il y a des changements applicables dans le Redux magasin)
  • appeler this.forceUpdate qui est similaire à this.setState

vous pouvez minimiser le nombre de redirection de votre composant en implémentant un check à l'intérieur de votre shouldComponentUpdate et retour false si elle n'en a pas besoin.

une Autre façon est d'utiliser React.PureComponent ou des composants apatrides. Les composants purs et apatrides ne se restituent que lorsqu'il y a des changements dans leurs accessoires.

33
répondu jpdelatorre 2016-12-07 00:50:30
la source

la réponse [email protected] est excellente pour mettre en évidence les raisons générales pour lesquelles un composant React pourrait être re-rendu.

je voulais juste de plonger un peu plus profondément dans un exemple: quand les accessoires du changement. Le dépannage de ce qui provoque un react component à re-render est un problème courant, et d'après mon expérience beaucoup de fois traquer cette question implique de déterminer quels accessoires sont en train de changer.

Réagir composants de rendre à nouveau chaque fois qu'ils recevoir de nouveaux accessoires. Ils peuvent recevoir de nouveaux accessoires comme:

<MyComponent prop1={currentPosition} prop2={myVariable} />

ou si MyComponent est connecté à un magasin redux:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

à tout moment la valeur de prop1,prop2,prop3, ou prop4 change MyComponent ré-rendu. Avec 4 étançons il n'est pas trop difficile de savoir quels étançons changent en mettant un console.log(this.props) à ce début de render bloc. Toutefois, avec des composants plus compliqués et des accessoires de plus en plus cette méthode est insoutenable.

Voici une approche utile (en utilisant lodash for convenience) pour déterminer quels changements de prop provoquent le rendu d'un composant:

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

L'ajout de cet extrait à votre composant peut aider à révéler le coupable causant des retours de données discutables, et souvent cela aide à faire la lumière sur les données inutiles étant acheminées dans les composants.

6
répondu Cumulo Nimbus 2018-03-01 19:23:55
la source

si vous voulez un court extrait sans aucune dépendance externe, je trouve cela utile

componentDidUpdate(prevProps) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`Prop '${key}' changed`)
  );
}
3
répondu Jacob R 2018-06-28 15:09:18
la source

Les réponses ci-dessus sont très utiles, juste au cas où si quelqu'un est à la recherche d'une méthode spécifique pour détecter la cause de rerender puis j'ai trouvé cette bibliothèque redux-enregistreur très utile.

ce que vous pouvez faire c'est ajouter la bibliothèque et activer la diffing entre les États (elle est là dans les docs) comme:

const logger = createLogger({
    diff: true,
});

Et ajouter le middleware dans le magasin.

alors mettez un console.log() dans la fonction rendu du composant que vous souhaitez tester.

alors vous pouvez lancer votre application et vérifier les logs de la console.Là où il y a un log juste avant il vous montrera la différence entre l'état (nextProps and this.props) et vous pouvez décider si le rendu est vraiment nécessaire, ilenter image description here

il sera similaire à l'image ci-dessus avec la touche diff.

0
répondu pritesh 2018-07-13 10:53:37
la source

Autres questions sur