import React, { PureComponent } from ‘react‘
function withRenderTime(WrappedComponent){
return class extends PureComponent{
componentWillMount() {
this.beginTime = Date.now();
}
componentDidMount(){
this.endTime = Date.now();
const interval = this.endTime - this.beginTime;
console.log(`${WrappedComponent.name}渲染时间:${interval}`);
}
render(){
return <WrappedComponent {...this.props}/>
}
}
}
class Home extends PureComponent {
render() {
return <h2>Home</h2>
}
}
// class Home extends PureComponent {
// componentWillMount() {
// this.beginTime = Date.now();
// }
// render() {
// return <h2>Home</h2>
// }
// componentDidMount(){
// this.endTime = Date.now();
// console.log(this.endTime ,this.beginTime);
// const interval = this.endTime - this.beginTime;
// console.log(`home渲染时间:${interval}`);
// }
// }
class About extends PureComponent {
render() {
return <h2>About</h2>
}
}
const TimeHome = withRenderTime(Home)
const TimeAbout = withRenderTime(About)
export default class App extends PureComponent {
render() {
return (
<div>
<TimeHome />
<TimeAbout />
</div>
)
}
}