Est-ce une mise en œuvre raisonnable de shouldComponentUpdate ?

Question

J'utilise React depuis des années, mais je n'ai jamais eu de méthode miracle pour implémenter shouldComponentUpdate . Les vérifications approfondies de l'égalité des props et des états imbriqués peuvent être difficiles.

Cependant, quel est le problème avec quelque chose comme ça :

shouldComponentUpdate(nextProps, nextState) {
  const propsChanged = JSON.stringify(this.props) !== JSON.stringify(nextProps)
  const stateChanged = JSON.stringify(this.state) !== JSON.stringify(nextState)
  return propsChanged || stateChanged
}

Est-ce approprié ? Cela pourrait-il échouer de manière inattendue ?

Je pense que JSON.stringify et la comparaison directe de chaînes de caractères seraient également des opérations très rapides.

Dans l'ensemble, cette approche me semble saine, mais je me demande si je ne manque pas de pièges évidents.

Answer 1

Est-ce que cela échouerait de manière inattendue ?

Probablement, et il est presque certain que cela serait plus lent que de faire une traversée profonde de l'objet pour déterminer l'égalité à la place (car JSON.stringify doit effectuer une traversée profonde des objets de toute façon ).

L'une des façons dont il peut échouer est que JSON.stringify peuvent retourner des chaînes différentes pour des objets équivalents (et c'est le comportement spécifié) :

const o1 = {a: 1, b: 2};
const o2 = {b: 2, a: 1};
const str1 = JSON.stringify(o1);
const str2 = JSON.stringify(o2);
console.log(str1);
console.log(str2);
console.log(str1 === str2);

...bien que je reconnaisse que c'est peu probable (au moins) dans le cas des props et de l'état dans votre composant React. (Cela se produit lorsque des propriétés d'index non entiers sur les objets deviennent créé dans un ordre différent. Cela ne se produira probablement pas avec vos propriétés d'état ou d'accessoires de niveau supérieur, mais qu'en est-il des objets subordonnés ? this.setState({foo}); donde foo est un objet créé de différentes manières à différents moments...)

Answer 2

Non, ce n'est pas une mise en œuvre raisonnable. JSON.stringify est une opération potentiellement lente.

Vous devez vous demander si vous avez vraiment besoin d'un contrôle profond de l'égalité. Pourquoi ne pas simplement dériver de PureComponent ? Il effectue une comparaison superficielle, mais cela ne serait-il pas suffisant ?

Answer 3

Utiliser la méthode loadash _.isEual lodash