web-dev-qa-db-fra.com

React Hooks - Comment puis-je implémenter shouldComponentUpdate?

Je sais que vous pouvez dire à React de sauter un effet en passant un tableau comme deuxième argument facultatif.

Par exemple:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

Mais que faire si je veux contrôler la comparaison? Pour ajouter ma propre logique de comparaison.

Je m'attendrais à quelque chose comme React.memo que vous pouvez passer une fonction comme deuxième argument.

reactjsreact-hooks
30
Idan Dagan

Une alternative pourrait être d'utiliser useRef pour conserver vos données et d'utiliser useState UNIQUEMENT pour stocker les données que vous souhaitez afficher. Parfois, cela fonctionne mieux que l'approche des mémos: j'ai récemment rencontré un cas où React rendait toujours inutilement lors de l'utilisation de React.memo, et il gâchait un affichage PIXI. L'approche ci-dessous corrigée pour moi ... j'espère que je n'ai pas fait d'anti-pattern :-)

const countRef = useRef(0);
const [countDisplay, setCountDisplay] = useState(0);

yourUpdateFunction = () => {
  // This is where count gets updated
  countRef.current = countRef.current + 1;
  if ((countRef.current % 2) === 0) setCountDisplay(countRef.current);
}

return (<p>countDisplay</p>);
0
Will59

La transmission du deuxième argument de tableau facultatif active la fonction d'effet si la propriété transmise dans le tableau change - tout comme la méthode shouldComponentUpdate dans un composant de classe s'exécuterait lorsque les accessoires transmis au composant changent. Vous pouvez décider dans la fonction d'effet en fonction de la valeur du paramètre - si vous souhaitez que l'effet s'applique ou non.

0
Arshabh Agarwal