I've been reading these links:
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
In the first link it says ( https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks ):
shouldComponentUpdate: See React.memo
The second link also states that:
Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.
What is desired:
I want Modal to render only when the Modal is visible (managed by this.props.show)
For class component:
shouldComponentUpdate(nextProps, nextState) {
return nextProps.show !== this.props.show;
}
How can I use memo
instead in a functional component - here, in Modal.jsx?
The related code:
Functional component Modal.jsx (I don't know how to check for 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;
The part of class component PizzaMaker jsx that renders 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>
);
Here is the documentation for React.memo
You can pass a function to control the comparison :
const Modal = React.memo(
props => {...},
(prevProps, nextProps) => prevProps.show === nextProps.show
);
when the function returns true
, the component will not be re-rendered
您也可以在导出语句中使用,例如:
export default memo(Modal, (prevProps, nextProps) => prevProps.show === nextProps.show) ;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.