Quelles optimisations de performances ont été apportées pour réagir aux composants ?

L'optimisation des performances des composants de React comprend : 1. Utiliser autant de fonctions sans état que possible pour créer des composants ; 2. Diviser les composants en sous-composants pour avoir un contrôle plus précis sur les composants ; 3. Utiliser PureRender pour apporter des modifications ; Produire un rendu minimal ; 4. Utiliser immuable.

Les optimisations des performances des composants React incluent :

1. Utilisez le mode sans état autant que possible. Les composants construits en fonction

les composants sans état n'ont que deux paramètres : les accessoires et le contexte. Il n'a ni état ni méthode de cycle de vie. Le composant lui-même est la méthode de rendu dans la méthode de construction de composants avec état.

Les composants apatrides doivent être utilisés chaque fois que cela est approprié. Les composants sans état ne créent pas de nouvelles instances lorsqu'ils sont appelés comme React.createClass et la classe ES6. Ils conservent toujours une instance lors de sa création, évitant ainsi les vérifications et l'allocation de mémoire inutiles et réalisant une optimisation interne.

2. Divisez le composant en sous-composants et contrôlez plus finement le composant

Concepts importants associés : Fonction pure

Pure function Trois grands principes de composition :

Étant donné la même entrée, il renvoie toujours la même sortie : par exemple, les contre-exemples incluent Math.random(), New Date()

Le processus n'a aucun côté effets : c'est-à-dire qu'il ne peut pas changer d'état externe

n'a pas de dépendances d'état supplémentaires : c'est-à-dire que l'état à l'intérieur de la méthode ne peut survivre que pendant le cycle de vie de la méthode, ce qui signifie que les variables partagées ne peuvent pas être utilisées dans la méthode.

Les fonctions pures sont très pratiques pour les tests et la refactorisation au niveau des méthodes. Elles peuvent donner au programme une bonne évolutivité et adaptabilité. Les fonctions pures sont la base des expressions fonctionnelles.

Le composant React lui-même est une fonction pure, c'est-à-dire qu'il transmet les accessoires spécifiés pour obtenir un certain DOM virtuel, et l'ensemble du processus est prévisible.

Méthodes spécifiques

Divisez les composants en sous-composants pour obtenir un contrôle plus fin des composants. Le maintien d’un état pur peut rendre les méthodes ou les composants plus ciblés, plus petits, plus indépendants, plus réutilisables et testables.

3. Utilisez PureRender pour rendre les modifications avec un rendu minimal

Concepts importants associés : PureRender

Pure dans PureRender signifie satisfaire à la condition d'un la fonction pure est que les composants rendus avec les mêmes accessoires et le même état obtiendront le même résultat.

L'implémentation de PureRender dans React nécessite de réimplémenter la méthode de cycle de vie ShouldComponentUpdate. ShouldComponentUpdate est une méthode spéciale qui reçoit les accessoires et l'état qui doivent être mis à jour. Son essence est d'effectuer un rendu correct des composants. Lorsqu'elle renvoie false, la méthode du cycle de vie ne sera plus exécutée vers le bas ; lorsqu'elle renvoie true, l'exécution se poursuivra vers le bas. Le composant

affichera une structure arborescente pendant le processus d'initialisation. Lorsque les accessoires du nœud parent changent, idéalement, seul le nœud sur le lien lié au changement d'accessoires sera rendu cependant, par défaut si la méthode ShouldComponentUpdate renvoie ; vrai, React restituera tous les nœuds.

Il existe des plug-ins officiels qui réécrivent shouldComponentUpdate, et vous pouvez également optimiser le code pour utiliser PureRender.

Méthodes spécifiques

(1) Utilisez PureRender

pour utiliser le plug-in officiel réagissez-addons-pure-render-mixin pour réécrire shouldComponentUpdate

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return <div className={this.props.className}>foo</div>
  }
}

Le principe est de faire une comparaison superficielle d'objets (y compris les accessoires et l'état), c'est-à-dire une comparaison de référence, une comparaison de non-valeur. Par exemple, il vous suffit de faire attention à savoir si chacun des accessoires est congruent (si l'accessoire est un objet, seule l'adresse est comparée et la même adresse est considérée comme la même), sans comparaison approfondie.

(2) Optimisez PureRender

pour éviter d'écrire du code qui déclenchera shouldComponentUpdate pour renvoyer true quoi qu'il arrive.

Évitez de définir des tableaux et des objets littéraux directement pour prop

Même si la valeur du tableau ou de l'objet transmis ne change pas à chaque fois, leurs adresses ont également changé.

Écrivez comme suit : chaque fois que le style est rendu, le nouvel objet déclenchera ShouldComponentUpdate sur true :

<Account style={{color: &#39;black&#39;}} />

Méthode d'amélioration : définissez le littéral sur une référence :

const defaultStyle = {};
<Account style={this.props.style || defaultStyle} />

Évitez de lier l'événement à chaque fois

Si vous liez l'événement comme ceci, une nouvelle valeur d'attribut onChange sera générée à chaque fois :

render() {
  return <input onChange={this.handleChange.bind(this)} />
}

doit être lié autant que possible au sein du constructeur . Si la liaison nécessite la transmission de paramètres, vous devez envisager de faire abstraction du sous-composant ou de modifier la structure de données existante :

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}
handleChange() {
  ...
}
render() {
  return <input onChange={this.handleChange} />
}

Lors de la configuration du sous-composant, réécrivez-le au niveau du composant parent shouldComponentUpdate

4. Utiliser immuable

Les objets en JavaScript sont généralement mutables. Étant donné que l'affectation de référence est utilisée, les modifications apportées au nouvel objet affecteront l'objet d'origine. Afin de résoudre ce problème, une copie approfondie ou une copie superficielle est utilisée, mais cela entraîne un gaspillage de CPU et de mémoire.

Immutable data résout très bien ce problème.

Les données immuables sont des données qui, une fois créées, ne peuvent pas être modifiées. La modification, l'ajout ou la suppression d'un objet Immuable renverra un nouvel objet Immuable. Le principe de l’implémentation Immuable est une structure de données persistante. Autrement dit, lorsque vous utilisez d'anciennes données pour créer de nouvelles données, les anciennes et les nouvelles données sont garanties d'être disponibles et inchangées en même temps. Dans le même temps, afin d'éviter la perte de performances causée par la copie profonde, Immutable utilise le partage structurel, c'est-à-dire que si un nœud dans l'arborescence des objets change, seuls ce nœud et le nœud parent affecté par celui-ci sont modifiés, et les autres nœuds sont partagés.

Recommandations d'apprentissage associées : Tutoriel d'apprentissage javascript

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!