Maison > Article > interface Web > Quelle fonction périodique correspond à l'optimisation des performances de réaction ?

Quelle fonction périodique correspond à l'optimisation des performances de réaction ?

WBOYoriginal: 2022-05-05 11:00:222177parcourir

L'optimisation des performances de React est la fonction périodique ShouldComponentUpdate ; cette fonction peut déterminer s'il est nécessaire d'appeler la méthode de rendu pour redessiner le dom, et peut optimiser l'algorithme dom diff. La syntaxe est "shouldComponentUpdate(Props, state)".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React16.4.0, ordinateur Dell G3.

Quelle fonction périodique est l'optimisation des performances de réaction ?

shouldComponentUpdate Cette méthode est utilisée pour déterminer si la méthode de rendu doit être appelée pour redessiner le dom. Parce que le rendu de dom consomme beaucoup de performances, si nous pouvons écrire un algorithme de diff dom plus optimisé dans la méthode ShouldComponentUpdate, les performances peuvent être grandement améliorées

le format de la méthode shouldComponentUpdate() est le suivant :

shouldComponentUpdate(nextProps, nextState)

méthode shouldComponentUpdate() renverra une valeur booléenne qui spécifie si React doit continuer le rendu. La valeur par défaut est true, c'est-à-dire que le composant sera restitué à chaque fois que l'état change.

La valeur de retour de ShouldComponentUpdate() est utilisée pour déterminer si la sortie du composant React est affectée par les changements dans l'état actuel ou les accessoires. Lorsque les accessoires ou l'état changent, ShouldComponentUpdate() sera appelé avant l'exécution du rendu.

L'exemple suivant montre l'opération effectuée lorsque la méthode ShouldComponentUpdate() renvoie false (ne peut pas être modifié en cliquant sur le bouton) :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritesite: "runoob"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeSite = () => {
    this.setState({favoritesite: "google"});
  }
  render() {
    return (
      <div>
      <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
      <button type="button" onClick={this.changeSite}>修改</button>
      </div>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById(&#39;root&#39;));
</script>
</body>
</html>

Résultat de sortie :

Quelle fonction périodique correspond à loptimisation des performances de réaction ?

L'exemple suivant montre l'opération effectuée lorsque la méthode ShouldComponentUpdate() La méthode renvoie vrai (cliquez sur Le bouton peut être modifié) :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritesite: "runoob"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeSite = () => {
    this.setState({favoritesite: "google"});
  }
  render() {
    return (
      <div>
      <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
      <button type="button" onClick={this.changeSite}>修改</button>
      </div>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById(&#39;root&#39;));
</script>
</body>
</html>

Résultat de sortie :

Quelle fonction périodique correspond à loptimisation des performances de réaction ?

Après avoir cliqué sur le bouton :

Quelle fonction périodique correspond à loptimisation des performances de réaction ?

Apprentissage recommandé : "Tutoriel vidéo 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi React utilise-t-il des composants spéciaux pour afficher les listes ?Article suivant：Pourquoi React utilise-t-il des composants spéciaux pour afficher les listes ?

Articles Liés

Voir plus