高阶组件应用-生命周期劫持-查看渲染时间

 

高阶组件应用-生命周期劫持-查看渲染时间

 

 

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>
        )
    }
}

高阶组件应用-生命周期劫持-查看渲染时间

上一篇:HDU ACM 8.13 T2 的 O(m)做法


下一篇:toLocaleString