摘要：拋磚引玉實現一個日志功能。一般都會抽出公共的部分。看起來挺完美的，實際上還是有個問題代碼的耦合性太強像這種日志功能應該同業(yè)務分離，不應該直接出現在業(yè)務代碼中。如果做過開發(fā)，應該很容易想到一個概念面向切面編程。

實現一個日志功能。

組件在掛載前打印 Component will mount

組件掛載后打印 Component did mount

var AComponent = React.createClass({
    componentWillMount: function () {
        console.log("Component will mount");
    },
    componentDidMount: function () {
        console.log("Component did mount");
    },
    render: function () {
        return (
            
AComponent
        )
    }
});

var BComponent = React.createClass({
    componentWillMount: function () {
        console.log("Component will mount");
    },
    componentDidMount: function () {
        console.log("Component did mount");
    },
    render: function () {
        return (
            
BComponent
        )
    }
});

看到上面的代碼，直接吐血而亡啊，寫的是什么幾把玩意兒。還好只寫了兩個組件，要是多個組件，相同的代碼就會重復多遍。相信大家看到上面的代碼也會發(fā)現一個致命的問題：可維護性太差差差！

相信大家都不會寫出上面的代碼，如果真有人會那樣寫，請允許我呵呵你。一般都會抽出公共的部分。

var Log = {
    componentWillMount: function () {
        console.log("Component will mount");
    },
    componentDidMount: function () {
        console.log("Component did mount");
    }
};


var AComponent = React.createClass({
    componentWillMount: function () {
        Log.componentWillMount();
    },
    componentDidMount: function () {
        Log.componentDidMount();
    },
    render: function () {
        return (
            
AComponent
        )
    }
});

var BComponent = React.createClass({
    componentWillMount: function () {
        Log.componentWillMount();
    },
    componentDidMount: function () {
        Log.componentDidMount();
    },
    render: function () {
        return (
            
BComponent
        )
    }
});

看起來挺完美的，實際上還是有個問題：代碼的耦合性太強！像這種日志功能應該同業(yè)務分離，不應該直接出現在業(yè)務代碼中。如果做過Java開發(fā)，應該很容易想到一個概念：AOP—面向切面編程。

利用React的Mixins，編寫的代碼就像這樣的：

var LogMixin = {
    componentWillMount: function () {
        console.log("Component will mount");
    },
    componentDidMount: function () {
        console.log("Component did mount");
    }
};

var AComponent = React.createClass({
    mixins: [LogMixin],
    render: function () {
        return (
            
AComponent
        )
    }
});

var BComponent = React.createClass({
    mixins: [LogMixin],
    render: function () {
        return (
            
BComponent
        )
    }
});

Mixins有點類似AOP。所謂的mixins就是將組件里的方法抽出來。實際上Mixins里的this是指向組件的，使用了Mixins以后，組件也可以調用Mixins里的方法。

var Mixin = {
    log:function(){
       console.log("Mixin log");
    }
};

var Component = React.createClass({
    mixins: [Mixin],
    componentWillMount: function () {
        this.log();
    },
    render: function () {            
        return (
            
Component
        )
    }
});

控制臺打印：

$ Mixin log

Mixins里也可以編寫組件生命周期的方法，需要注意的是：Mixins里的方法并不會覆蓋組件的生命周期方法，會在先于組件生命周期方法執(zhí)行。

var Mixin = {
    componentWillMount: function () {
        console.log("Mixin Will Mount");
    }
};

var Component = React.createClass({
    mixins: [Mixin],
    componentWillMount: function () {
        console.log("Component Will Mount");
    },
    render: function () {
        return (
            
Component
        )
    }
});

控制臺打印：

$ Mixin Will Mount
$ Component Will Mount

組件也可以使用多個Mixin

var AMixin = {
    componentWillMount: function () {
        console.log("AMixin Will Mount");
    }
};

var BMixin = {
    componentWillMount: function () {
        console.log("BMixin Will Mount");
    }
};

var Component = React.createClass({
    mixins: [AMixin,BMixin],
    componentWillMount: function () {
        console.log("Component Will Mount");
    },
    render: function () {
        return (
            
Component
        )
    }
});

控制臺打印：

$ AMixin Will Mount
$ BMixin Will Mount
$ Component Will Mount

數組引入的順序，決定了Mxins里生命周期方法的執(zhí)行順序。

除了生命周期方法可以重復以外，其他的方法都不可以重復，否則會報錯

var AMixin = {
    log: function () {
        console.log("AMixin Log");
    }
};

var BMixin = {
    log: function () {
        console.log("BMixin Log");
    }
};

var Component = React.createClass({
    mixins: [AMixin,BMixin],
    render: function () {
        return (
            
Component
        )
    }
});

var Mixin = {
    log: function () {
        console.log("Mixin Log");
    }
};

var Component = React.createClass({
    mixins: [Mixin],
    log:function(){
        console.log("Component Log");
    },
    render: function () {
        return (
            
Component
        )
    }
});

以上兩種情景，都會報錯，控制信息如下，所以使用的時候要小心了