web-dev-qa-db-fra.com

React le rendu du composant est appelé plusieurs fois lors de l'insertion d'une nouvelle URL.

Je construis un PhotoViewer qui modifie les photos lorsque l'utilisateur appuie à gauche ou à droite. J'utilise React, Redux, react-router et react-router-redux. Lorsque l'utilisateur appuie à gauche ou à droite, je fais deux choses, je mets à jour l'URL à l'aide de this.context.replace() et j'envoie une action pour mettre à jour la photo actuellement affichée, this.props.dispatch(setPhoto(photoId)). Je suis abonné aux changements d'état pour le débogage.

Chacune des lignes ci-dessus déclenche un nouveau changement d'état. Le fait de distribuer une action met à jour le magasin depuis que j'ai mis à jour le currentlyViewedPhoto et la mise à jour de l'URL met à jour le magasin, car react-router-redux met à jour l'URL dans le magasin. Lors de l'envoi de l'action, dans le premier cycle de rendu, la fonction render du composant est appelée deux fois. Dans le deuxième cycle de rendu, la fonction render du composant est appelée une fois. Est-ce normal? Voici le code pertinent:

class PhotoViewer extends Component {
  pressLeftOrRightKey(e) {
    ... code to detect that left or right arrow was pressed ...

    // Dispatching the action triggers a state update
    // render is called once after the following line
    this.props.dispatch(setPhoto(photoId)) // assume photoId is correct

    // Changing the url triggers a state update
    // render is called twice
    this.context.router.replace(url) // assume url is correct
    return
  }

  render() {
    return (
      <div>Test</div>
    )
  }
}

function select(state) {
  return state
}

export default connect(select)(PhotoViewer)

Est-ce normal que le rendu s'appelle trois fois? Cela semble excessif, car React devra faire la différence de DOM trois fois. Je suppose que cela n’aura pas vraiment d’importance, car rien n’a changé. Je suis nouveau dans cet ensemble d’outils, alors n'hésitez pas à demander plus de questions sur ce problème.

javascriptreactjsreact-routerredux
26
egidra

Je suppose que c'est normal. Si vous ne rencontrez pas de problèmes de performances notables, je ne devrais pas transpirer. Si les performances commencent à poser problème, vous pouvez redéfinir la méthode shouldComponentUpdate lifecycle si vous êtes certain que certains changements d'état ne modifieront pas le composant rendu.

Edit: Vous pouvez aussi chercher à étendre React.PureComponent au lieu de React.Component _ si vous n’avez besoin que d’une comparaison superficielle dans votre méthode shouldComponentUpdate. Plus d'infos ici .

23
Donald

Si vous définissez l'état à trois étapes différentes, le composant effectuera un nouveau rendu trois fois.

setState () déclenchera toujours un rendu à moins que la logique de rendu conditionnel soit implémentée dans shouldComponentUpdate ().

( source )

Vous pouvez implémenter la logique dans shouldComponentUpdate () pour éviter les rediffusions inutiles si vous rencontrez des problèmes de performances.

20
villeaka