Pratique d'optimisation des performances React : comment réduire l'empreinte mémoire des applications frontales

Pratique d'optimisation des performances React : Comment réduire l'empreinte mémoire des applications frontales

Introduction :
Alors que la complexité des applications frontales continue d'augmenter, le besoin d'optimisation des performances devient de plus en plus urgent. L'une des orientations importantes consiste à réduire l'utilisation de la mémoire. Cet article présentera quelques méthodes pratiques d'optimisation des performances de React et fournira des exemples de code spécifiques pour aider les développeurs à mieux comprendre et appliquer ces stratégies d'optimisation.

1. Évitez le re-rendu inutile des composants
Le re-rendu des composants dans React consomme beaucoup de mémoire, nous devons donc éviter autant que possible les re-rendus inutiles. Voici plusieurs stratégies d'optimisation courantes :

1. Utilisez ShouldComponentUpdate() ou PureComponent
   React fournit la méthode ShouldComponentUpdate() pour déterminer si le composant doit être restitué en renvoyant une valeur booléenne. Nous pouvons décider de refaire le rendu en fonction des modifications apportées aux accessoires ou à l'état du composant. De plus, vous pouvez également utiliser PureComponent de React, qui effectuera automatiquement une comparaison superficielle des accessoires et de l'état du composant. S'il n'y a aucun changement, le composant ne sera pas restitué.

Exemple de code :

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.value === this.props.value) {
      return false;
    }
    return true;
  }

  render() {
    // 渲染逻辑
  }
}

2. Utilisation de la fonction memo()
   React fournit la fonction memo(), qui peut être utilisée pour convertir les composants de fonction en composants "mémoire" qui ne seront restitués que lorsque les accessoires changent. Ceci est utile pour certains composants simples sans état.

Exemple de code :

const MyComponent = React.memo(function MyComponent(props) {
  // 渲染逻辑
});

2. Optimisez la fonction de gestion des événements du composant
La fonction de gestion des événements dans le composant sera recréée à chaque fois qu'il est rendu, ce qui entraînera une augmentation de l'utilisation de la mémoire. Afin d'optimiser les performances, nous pouvons promouvoir la fonction de gestion des événements en dehors du composant pour éviter les créations répétées.

Exemple de code :

class MyComponent extends React.Component {
  handleClick = () => {
    // 处理逻辑
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

3. Utilisation appropriée des méthodes de cycle de vie des composants
Les méthodes de cycle de vie des composants React offrent de nombreuses opportunités pour optimiser les performances. Voici quelques méthodes de cycle de vie et stratégies d'optimisation couramment utilisées :

1. componentDidMount()
   Une fois le composant chargé, certaines acquisitions de données asynchrones ou d'autres effets secondaires peuvent être effectués dans cette méthode. Évitez d'effectuer ces opérations dans la méthode render() pour éviter un nouveau rendu inutile.

Exemple de code :

class MyComponent extends React.Component {
  componentDidMount() {
    // 异步数据获取或其他副作用操作
  }

  render() {
    // 渲染逻辑
  }
}

2. componentWillUnmount()
   Avant la désinstallation du composant, vous pouvez nettoyer certaines ressources avec cette méthode, telles que la désinscription, l'effacement des minuteries, etc.

Exemple de code :

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件装载完成后订阅事件
    this.subscription = eventEmitter.subscribe(this.handleEvent);
  }

  componentWillUnmount() {
    // 在组件卸载之前取消订阅事件
    this.subscription.unsubscribe();
  }

  render() {
    // 渲染逻辑
  }
}

4. Optimiser le rendu des listes
Le rendu des listes est généralement l'un des goulots d'étranglement en termes de performances dans les applications React. Voici quelques stratégies courantes pour optimiser le rendu de la liste :

1. Utiliser les attributs clés
   Lors du rendu d'une liste, attribuez un attribut clé unique à chaque élément de la liste pour aider React à mieux identifier les modifications dans chaque élément de la liste, évitant ainsi un nouveau rendu inutile.

Exemple de code :

class MyComponent extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

2. Utilisez une liste virtuelle
   S'il y a un grand nombre d'éléments de liste, vous pouvez envisager d'utiliser une liste virtuelle pour le rendu et d'afficher uniquement les éléments de liste dans la zone visible, réduisant ainsi le nombre d'éléments de liste. rendus et amélioration des performances.

Exemple de code :

import { FixedSizeList } from 'react-window';

class MyComponent extends React.Component {
  renderRow = ({ index, style }) => {
    const item = this.props.items[index];

    return (
      <div style={style}>
        {item.name}
      </div>
    );
  }

  render() {
    return (
      <FixedSizeList
        height={400}
        width={300}
        itemCount={this.props.items.length}
        itemSize={50}
      >
        {this.renderRow}
      </FixedSizeList>
    );
  }
}

Résumé :
Grâce aux stratégies d'optimisation ci-dessus, nous pouvons réduire l'utilisation de la mémoire des applications frontales et améliorer les performances des applications React. Cependant, il convient de noter que l’optimisation n’est pas statique et doit être ajustée en fonction de la situation réelle de l’application. J'espère que cet article pourra aider les développeurs à optimiser les performances de 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!