@someok/react-debug/src/LifecycleDebug.js

React Debug Components

/*
 * Created by wjx on 2017-06-07 18:25.
 */
import React, {PureComponent} from 'react';

const getDisplayName = (WrappedComponent) => {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
};

export default (WrappedComponent) => class extends PureComponent {

    static displayName = `LifecycleDebug${getDisplayName(WrappedComponent)}`;

    componentWillMount() {
        this.colorLog('log', 'componentWillMount');
    }

    componentDidMount() {
        this.colorLog('log', 'componentDidMount');
    }

    componentWillReceiveProps(nextProps) {
        this.colorLog('group', 'componentWillReceiveProps');
        console.log('this.props', this.props);
        console.log('nextProps', nextProps);
        console.groupEnd();
    }

    componentWillUpdate(nextProps) {
        this.colorLog('group', 'componentWillUpdate');
        console.log('this.props', this.props);
        console.log('nextProps', nextProps);
        console.groupEnd();
    }

    componentDidUpdate(prevProps) {
        this.colorLog('group', 'componentDidUpdate');
        console.log('prevProps', prevProps);
        console.log('this.props', this.props);
        console.groupEnd();
    }

    componentWillUnmount() {
        this.colorLog('log', 'componentWillUnmount');
    }

    colorLog = (fn, log) => {
        return console[fn](`%c LifecycleDebug ${log} `, 'background: #222; color: #bada55');
    };

    render() {
        this.colorLog('log', 'render');

        return <WrappedComponent {...this.props}/>;
    }
};