J'ai lu ces liens:
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
Dans le premier lien, il est indiqué ( https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks ):
shouldComponentUpdate: Voir React.memo
Le deuxième lien indique également que:
Les composants de classe peuvent renoncer au rendu lorsque leurs accessoires d'entrée sont les mêmes à l'aide de PureComponent ou shouldComponentUpdate. Vous pouvez maintenant faire de même avec les composants de fonction en les enveloppant dans React.memo.
Ce qui est souhaité:
Je veux que le modal soit rendu uniquement lorsque le modal est visible (géré par this.props.show)
Pour le composant classe:
shouldComponentUpdate(nextProps, nextState) {
return nextProps.show !== this.props.show;
}
Comment puis-je utiliser memo
à la place dans un composant fonctionnel - ici, dans Modal.jsx?
Le code associé:
Composant fonctionnel Modal.jsx (je ne sais pas comment vérifier pour props.show)
import React, { useEffect } from 'react';
import styles from './Modal.module.css';
import BackDrop from '../BackDrop/BackDrop';
const Modal = React.memo(props => {
useEffect(() => console.log('it did update'));
return (
<React.Fragment>
<BackDrop show={props.show} clicked={props.modalClosed} />
<div
className={styles.Modal}
style={{
transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
opacity: props.show ? '1' : '0'
}}>
{props.children}
</div>
</React.Fragment>
);
});
export default Modal;
La partie du composant de classe PizzaMaker jsx qui rend Modal:
return (
<React.Fragment>
<Modal show={this.state.purchasing} modalClosed={this.purchaseCancel}>
<OrderSummary
ingredients={this.state.ingredients}
purchaseCancelled={this.purchaseCancel}
purchaseContinued={this.purchaseContinue}
price={this.state.totalPrice}
/>
</Modal>
...
</React.Fragment>
);
Voici le documentation pour React.memo
Vous pouvez passer une fonction pour contrôler la comparaison:
const Modal = React.memo(
props => {...},
(prevProps, nextProps) => prevProps.show === nextProps.show
);
lorsque la fonction retourne true
, le composant ne sera pas restitué