Explication détaillée de la différence entre Component et PureComponent

Cette fois, je vais vous donner une explication détaillée de la différence entre l'utilisation de Component et PureComponent. Quelles sont les précautions lors de l'utilisation de Component et PureComponent. jetez un oeil.

J'ai commencé à utiliser PureCompoent parce que c'était une version plus performante de Component. Bien que cela s’avère vrai, cette augmentation des performances s’accompagne de quelques mises en garde. Approfondissons un peu PureComponent et comprenons pourquoi nous devrions l'utiliser.

Component et PureComponent ont une différence

À l'exception de vous fournir une méthode shouldComponentUpdate avec une comparaison superficielle, PureComponent et Component sont fondamentalement identiques. Lorsque props ou state change, PureComponent effectuera une comparaison superficielle entre props et state. D'un autre côté, Component ne compare pas props et state dans les états actuel et suivant. Par conséquent, chaque fois que shouldComponentUpdate est appelé, le composant sera restitué par défaut.

Comparaison superficielle 101

Lors de la comparaison des props et state précédents et suivants, la comparaison superficielle vérifiera si la valeur d'origine a la même valeur (par exemple : 1 == 1 ou ture==true), si le tableau et l' objet référence sont identiques.

Ne changez jamais

Vous avez peut-être entendu dire, ne changez pas les objets et les tableaux dans props et state, si vous modifiez des objets dans votre composant parent, vos sous-composants "purs" le seront ne soit pas mis à jour. Bien que la valeur ait été modifiée, le sous-composant compare si la référence précédente de props est la même, sans effectuer de comparaison approfondie.

En revanche, vous pouvez renvoyer un nouvel objet en utilisant la méthode d'affectation es6 ou l'opérateur d'extension de tableau ou en utilisant une bibliothèque tierce pour obtenir l'immuabilité.

Vous rencontrez des problèmes de performances ?

Comparer les valeurs primitives et les références d'objets est une opération peu coûteuse. Si vous avez une liste d'objets enfants et que l'un d'entre eux est mis à jour, vérifier leurs props et state est beaucoup plus rapide que de restituer chaque nœud enfant

Autres solutions Solution

Ne liez pas de valeurs dans la fonction de rendu

Supposons que vous ayez une liste d'éléments et que chaque élément reçoive un paramètre unique à la méthode parent. Pour lier des paramètres, vous pouvez faire ceci :

<CommentItem likeComment={() => this.likeComment(user.id)} />

Ce problème entraînera la création d'une nouvelle fonction à chaque fois que la méthode de rendu du composant parent est appelée, après l'avoir transmise à likeComment. Cela aura pour effet secondaire de modifier chaque composant enfant props, ce qui entraînera leur nouveau rendu, même si les données elles-mêmes n'ont pas changé.

Pour résoudre ce problème, transmettez simplement une référence à la méthode prototype du composant parent au composant enfant. La propriété likeComment du composant enfant aura toujours la même référence, il n'y aura donc pas de nouveaux rendus inutiles.

<CommentItem likeComment={this.likeComment} userID={user.id} />

Créez ensuite une méthode de classe dans le composant enfant qui fait référence à l'attribut entrant :

class CommentItem extends PureComponent {
  ...
  handleLike() {
    this.props.likeComment(this.props.userID)
  }
  ...
}

Ne dérivez pas de données dans la méthode de rendu

Pensez à it Le composant de configuration affichera les dix articles préférés de l'utilisateur parmi une série d'articles.

render() {
  const { posts } = this.props
  const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  return //...
}

Chaque fois que le composant restitue topTen aura une nouvelle référence, même si posts n'a pas changé et que les données dérivées sont les mêmes. Cela entraînera un nouveau rendu inutile de la liste.

Vous pouvez résoudre ce problème en mettant en cache vos données dérivées. Par exemple, définissez les données dérivées dans votre composant state afin qu'elles ne soient mises à jour que lorsque les publications sont mises à jour.

componentWillMount() {
  this.setTopTenPosts(this.props.posts)
}
componentWillReceiveProps(nextProps) {
  if (this.props.posts !== nextProps.posts) {
    this.setTopTenPosts(nextProps)
  }
}
setTopTenPosts(posts) {
  this.setState({
    topTen: posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  })
}

Si vous utilisez Redux, pensez à utiliser reselect pour créer des « sélecteurs » pour combiner et mettre en cache les données dérivées.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du cycle de vie dans React

Explication détaillée de l'utilisation de la communication des composants dans React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!