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} /> <Toolbar drawerToggleClicked={this.sideDrawerToggleHandler} />
<SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} /> <SideDrawer open={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} />
<main className={classes.Content}> <main className={classes.Content}>
{this.state.children} {this.props.children}
</main> </main>
</Aux> </Aux>

View File

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