component: improve the performance by using shouldComponentUpdate() lifecycle

master
oscarzhou 2020-12-13 19:25:45 +13:00
parent e6f0d986dc
commit b94ea9284b
2 changed files with 26 additions and 20 deletions

View File

@ -26,7 +26,7 @@ class Layout extends Component {
<Toolbar drawerToggleClicked={this.sideDrawerToggleHandler} />
<SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} />
<main className={classes.Content}>
{this.state.children}
{this.props.children}
</main>
</Aux>

View File

@ -1,26 +1,32 @@
import React from 'react';
import React, { Component } from 'react';
import Aux from '../../../hoc/Auxiliary';
import Backdrop from '../Backdrop/Backdrop';
import classes from './Modal.css';
const modal = (props) => {
return (
<Aux>
<Backdrop
show={props.show}
clicked={props.modalClosed}></Backdrop>
<div
className={classes.Modal}
style={{
transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
opacity: props.show ? '1' : '0',
}}>
{props.children}
</div>
class Modal extends Component {
</Aux>
);
};
shouldComponentUpdate(nextProps, nextState){
return nextProps.show !== this.props.show;
}
export default modal;
render() {
return (
<Aux>
<Backdrop
show={this.props.show}
clicked={this.props.modalClosed}></Backdrop>
<div
className={classes.Modal}
style={{
transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
opacity: this.props.show ? '1' : '0',
}}>
{this.props.children}
</div>
</Aux>
);
}
}
export default Modal;