赵走x博客 - 开发者的网上家园

13、组件生命周期示例：使用mixin

资源编号:76061 书籍 React快速上手开发热度：80

为了实现代码复用，接下来引入一个新概念：mixin。

在前面的例子中，五个生命周期方法中的四个已经被日志记录下来。当子组件从父组件中移除时，最能体现第五个方法componentWillUnmount() 的作用。在下面这个例子中，要把父子组件的所有变化都记录下来。为了实现代码复用，接下来引入一个新概念：mixin。

mixin 其实是一个JavaScript 对象，包含一系列方法和属性。mixin 不能独立使用，需要包含在另一个对象的属性中。在这个日志例子中，mixin 可以写成这样：
```
var logMixin={
        _log:function(methodName,args){
            console.log(methodName,args);
        },
        componentWillUpdate:function(){
            this._log('componentWillUpdate',arguments)
        },
        componentDidUpdate:function(){
            this._log('componentDidUpdate',arguments)
        },
        componentWillMount:function(){
            this._log('componentWillMount',arguments)
        },
        componentDidMount:function(){
            this._log('componentDidMount',arguments)
        },
        componentWillUnmount:function(){
            this._log('componentWillUnmount',arguments)
        },
    };
```
在非React 世界中，你可以使用for-in 循环，把所有属性复制到一个新对象中，并通过这种方法让新对象获得mixin 的所有功能。在React 世界中，你可以通过mixins 属性快速实现，就像这样：
```
var MyComponent = React.createClass({
mixins: [obj1, obj2, obj3],
// 其他所有方法
};
```
只需要把一个JavaScript 对象数组赋值给mixins 属性，然后把剩下的工作交给React。把logMixin 包含到组件中的方法如下：
```
var TextAreaCounter = React.createClass({
		name: 'TextAreaCounter',
		mixins: [logMixin],
		// 其他所有方法
};
```
如你所见，这个代码片段还添加了一个name 属性，方便辨认调用者。

如果你运行这个包含mixin 的代码例子，可以看到其日志输出（如图2-12 所示）。

![bs64](https://img.handsomemark.com/2019/11/09/c3209722-02ab-11ea-9e2c-0242ac140002.png)
图2-12：使用mixin 并辨认组件