component: improve the performance by using shouldComponentUpdate() lifecycle
This commit is contained in:
parent
e6f0d986dc
commit
b94ea9284b
@ -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>
|
||||
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user