Introduction à PureComponent dans React

Cet article présente principalement l'introduction de PureComponent dans React, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

React évite les rendus répétés

. React crée et maintient une implémentation interne dans l'interface utilisateur rendue, qui inclut les éléments React renvoyés par les composants. Cette implémentation permet à React d'éviter la création et l'association inutiles de nœuds DOM, car cela peut être plus lent que la manipulation directe d'objets JavaScript. C'est ce qu'on appelle un « DOM virtuel ».

Lorsque les accessoires ou l'état d'un composant changent, React détermine s'il est nécessaire de mettre à jour le DOM réel en comparant l'élément nouvellement renvoyé avec l'élément précédemment rendu. Lorsqu'ils ne sont pas égaux, React met à jour le DOM.

Dans certains cas, votre composant peut améliorer la vitesse en remplaçant la fonction de cycle de vie ShouldComponentUpdate, qui est déclenchée avant le début du processus de nouveau rendu. Cette fonction renvoie true par défaut, permettant à React d'effectuer des mises à jour :

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

Exemple

Si vous souhaitez que le composant soit restitué uniquement lorsque la valeur de props.color ou state.count modifications, vous pouvez définir shouldComponentUpdate comme ceci :

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

Dans le code ci-dessus, shouldComponentUpdate vérifie uniquement les modifications dans props.color et state.count. Si ces valeurs ne changent pas, le composant ne sera pas mis à jour. À mesure que vos composants deviennent plus complexes, vous pouvez utiliser un modèle similaire pour effectuer une « comparaison superficielle » des propriétés et des valeurs afin de déterminer si le composant doit être mis à jour. Ce modèle est si courant que React fournit un objet d'assistance pour implémenter cette logique - hérité de React.PureComponent. Le code suivant peut réaliser la même opération plus simplement :

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}

PureComponent

Principe

Lorsque le composant est mis à jour, si ni les props ni l'état du composant changement, La méthode de rendu ne sera pas déclenchée, éliminant le processus de génération et de comparaison du Virtual DOM, améliorant ainsi les performances. Plus précisément, React effectue automatiquement une comparaison superficielle pour nous :

if (this._compositeType === CompositeTypes.PureClass) {
    shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);
}

Et que fait ShallowEqual ? Il comparera si la longueur de Object.keys(state | props) est cohérente, si chaque clé a les deux et s'il s'agit d'une référence, c'est-à-dire que seule la valeur du premier niveau est comparée, ce qui est en effet très superficiel, une imbrication si profonde Les données ne peuvent pas être comparées.

Problèmes

Dans la plupart des cas, vous pouvez utiliser React.PureComponent sans avoir à écrire votre propre ShouldComponentUpdate, qui fait simplement une comparaison superficielle. Mais comme une comparaison superficielle ignorera le cas d'un attribut ou d'un état mutation , vous ne pouvez pas l'utiliser pour le moment.

class ListOfWords extends React.PureComponent {
  render() {
    return <p>{this.props.words.join(',')}</p>;
  }
}

class WordAdder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ['marklar']
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This section is bad style and causes a bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

  render() {
    return (
      <p>
        <button onClick={this.handleClick} />
        <ListOfWords words={this.state.words} />
      </p>
    );
  }
}

Dans ListOfWords, this.props.words est une référence à son état transmis dans WordAdder. Bien qu'elle ait été modifiée dans la méthode handleClick de WordAdder, pour ListOfWords, sa référence reste inchangée, ce qui entraîne sa non mise à jour.

Solution

Comme on peut le trouver dans le problème ci-dessus, lorsqu'une donnée est une donnée immuable, une référence peut être utilisée. Mais pour une donnée mutable, elle ne peut pas être donnée à PureComponent par référence. Pour faire simple, lorsque nous modifions les données utilisées par PureComponent dans la couche externe, nous devons lui attribuer un nouvel objet ou une nouvelle référence pour garantir qu'il puisse être restitué. Par exemple, handleClick dans l'exemple ci-dessus peut être modifié comme suit pour confirmer le rendu correct :

handleClick() {
  this.setState(prevState => ({
    words: prevState.words.concat(['marklar'])
  }));
}

或者

handleClick() {
  this.setState(prevState => ({
    words: [...prevState.words, 'marklar'],
  }));
};

或者针对对象结构：

function updateColorMap(oldObj) {
  return Object.assign({}, oldObj, {key: new value});
}

immutable.js

Immutable.js est une autre façon de résoudre ce problème. Il fournit des collections immuables et durables grâce au partage de structure :

• Immuable : Une fois créée, une collection ne peut pas être modifiée à un autre moment.

• Persistance : De nouvelles collections peuvent être créées en utilisant la collection originale et une mutation. La collection d'origine reste disponible après la création de la nouvelle collection.

• Partage de structure : la nouvelle collection est créée en utilisant autant que possible la structure de la collection originale pour minimiser les opérations de copie et améliorer les performances.

// 常见的js处理
const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

// 使用 immutable.js

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
x === y; // false

Résumé

PureComponent Ce qui fonctionne vraiment n'est que sur certains composants d'affichage purs. Si des composants complexes sont utilisés shallowEqual ce niveau est fondamentalement Can'. Je ne passerai pas. De plus, afin de garantir un rendu correct lors de l'utilisation, rappelez-vous que props et state ne peuvent pas utiliser la même référence.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

La différence entre AngularJs et Angular pour l'écriture d'instructions couramment utilisées

ztree obtient json via ajax et vérifie chéquier

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!