React Mixin 的使用

逃离我推掉我的手 2023-07-03 14:30 18阅读 0赞

> *update*: Mixin 只适用于 ES5。如果你的项目里面用的是 ES6 ，可以采用[高阶组件][Link 1]点击预览来实现 Mixin 的功能。

我使用 `React.js` 构建大型项目已经有一段时间了，我遇到过很多在不同的组件中都要用到相同功能的情况。因此，我花了一个小时左右的时间去了解`mixin`的用法，然后分享我所学习到的一些东西。

## 为什么使用 Mixin ？ ##

`React`回避子类组件，但是我们知道，到处重复地编写同样的代码是不好的。所以为了将同样的功能添加到多个组件当中，你需要将这些通用的功能包装成一个`mixin`，然后导入到你的模块中。 可以说，相比继承而已，`React`更喜欢这种组合的方式。嗯，我也喜欢这样。

## 写一个简单的 Mixin ##

现在假设我们在写一个app，我们知道在某些情况下我们需要在好几个组件当中设置默认的`name`属性。  
现在，我们不再是像以前一样在每个组件中写多个同样的`getDefaultProps`方法，我们可以像下面一样定义一个`mixin`：

var DefaultNameMixin = {
        getDefaultProps: function () {
            return {name: "Skippy"};
        }
    };

它没什么特殊的，就是一个简单的对象而已。

## 加入到 React 组件中 ##

为了使用`mixin`，我们只需要简单得在组件中加入`mixins`属性，然后把刚才我们写的`mixin`包裹成一个数组，将它作为该属性的值即可：

[JSFiddle 示例：一个简单的 mixin 例子][JSFiddle _ mixin]点击预览

## 重复使用 ##

就像你想象的那样，我们可以在任何其他组件中包含我们的`mixin`：

var ComponentTwo = React.createClass({
        mixins: [DefaultNameMixin],
        render: function () {
            return (
                <div>
                    <h4>{this.props.name}</h4>
                    <p>Favorite food: {this.props.food}</p>
                </div>
            );
        }
    });

[JSFiddle 示例：在多个组件中使用同一个 mixin][JSFiddle _ mixin 1]点击预览

## 生命周期方法会被重复调用！ ##

如何你的`mixin`当中包含[生命周期方法][Link 2]，不要焦急，你仍然可以在你的组件中使用这些方法，而且它们都会被调用：

[JSFiddle 示例：展示了两个 default props 都会被设置][JSFiddle _ default props]点击预览

两个`getDefaultProps`方法都将被调用，所以我们可以得到默认为`Skippy`的`name`属性和默认为`Pancakes`的`food`属性。任何一个生命周期方法或属性都会被顺利地重复调用，但是下面的情况除外：

*  `render`：包含多个`render`方法是不行的。React 会跑出异常：

Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: 
    You are attempting to define `render` on your component more than once. 
    This conflict may be due to a mixin.

*  `displayName`：你多次的对它进行设置是没有问题的，但是，最终的结果只以最后一次设置为准。

需要指出的是，`mixin`是可以包含在其他的`mixin`中的：

程序会在控制台打印出`asdas`。

## 包含多个 Mixins ##

我们的`mixins`要包裹在数组当中，提醒了我们可以在组件中包含多个`mixins`：

## 注意事项 ##

这里有几件事需要引起我们的注意，当我们使用`mixins`的时候。 幸运地是，这些看起来并不是什么大问题，下面是我们在实践当中发现的一些问题：

### 设置相同的 Prop 和 State ###

如果你尝试在不同的地方定义相同的属性时会出现下面的异常：

Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): 
    Tried to merge two objects with the same key: name

### 设置相同的方法 ###

在不同的`mixin`中定义相同的方法，或者`mixin`和组件中包含了相同的方法时，会抛出异常：

异常信息同多次定义`rander`方法时抛出的异常一样：

Uncaught Error: Invariant Violation: ReactCompositeComponentInterface: 
    You are attempting to define `logBlah` on your component more than once. 
    This conflict may be due to a mixin.

## 多个生命周期方法的调用顺序 ##

如果我们的组件和`mixin`中都包含了相同的生命周期方法的话会怎样呢？

> 我们的`mixin`方法首先会被调用，然后再是组件的中方法被调用。

那当我们的组件中包含多个`mixin`，而这些`mixin`中又包含相同的生命周期方法时，调用顺序又是如何？

> 它们会根据`mixins`中的顺序从左到右的进行调用。

实例代码：

控制台将输出：

another mixin mount method
    mixin mount method 
    component one mount method
    
    mixin mount method
    another mixin mount method 
    component two mount method

## 总结 ##

Mixin 使你React程序变得更为可重用，It's a Good Thing.  
我希望这篇文章能够对你有所帮助，如果有任何反馈，很高兴你能够在twitter上[@veddermatic][veddermatic]

[Link 1]: https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775
[JSFiddle _ mixin]: http://jsfiddle.net/veddermatic/qzh0ug5y/1/
[JSFiddle _ mixin 1]: http://jsfiddle.net/veddermatic/qzh0ug5y/2/
[Link 2]: http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods
[JSFiddle _ default props]: http://jsfiddle.net/veddermatic/qzh0ug5y/3/
[veddermatic]: https://twitter.com/veddermatic