组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能，共享一部分代码。所以 React 提供了 mixins 这种方式来处理这种问题。
Mixin 就是用来定义一些方法，使用这个 mixin 的组件能够自由的使用这些方法（就像在组件中定义的一样），所以 mixin 相当于组件的一个扩展，在 mixin 中也能定义“生命周期”方法。
var DefaultNameMixin = {
getDefaultProps: function () {
return {
name: "Skippy",
food: "Pancakes"
};
}
};
var ComponentOne = React.createClass({
mixins: [DefaultNameMixin],
render: function () {
return (
<div>
<h4>{this.props.name}</h4>
<p>Favorite food: {this.props.food}</p>
</div>
) ;
}
});
ReactDOM.render(<ComponentOne/>, document.body);
Mixin定义的一些功能都是可以共享，如果当我们使用相同状态和属性时将会报错。
var DefaultNameMixin = {
getDefaultProps: function () {
return {name: "Skippy"};
}
};
var ComponentTwo = React.createClass({
mixins: [DefaultNameMixin],
getDefaultProps: function () {
return {
food: "Pancakes",
name: "Lizy"
};
},
render: function () {
return (
<div>
<h4>{this.props.name}</h4>
<p>Favorite food: {this.props.food}</p>
</div>
);
}
});
ReactDOM.render(<ComponentTwo/>, document.body);
console.log:
Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): Tried to merge two objects with the same key: name
当我们的component和mixin都含有生命周期方法时,我们的mixin方法始终会先执行.
var LogOnMountMixin = {
componentDidMount: function () {
console.log("mixin mount method");
}
};
var ComponentOne = React.createClass({
mixins: [LogOnMountMixin],
componentDidMount: function () {
mixin mount method component one mount method
console.log("component one mount method"); }, render: function() { return <h2>Hello {this.props.name}</h2>; } }); ReactDOM.render(<ComponentOne/>, document.body);
console.log:
mixin mount method component one mount method
当我们include多个mixin时，他们会从左到右执行.
var LogOnMountMixin = {
componentDidMount: function () {
console.log("mixin mount method");
}
};
var MoreLogOnMountMixin = {
componentDidMount: function () {
console.log("another mixin mount method");
}
};
var ComponentOne = React.createClass({
mixins: [MoreLogOnMountMixin, LogOnMountMixin],
componentDidMount: function () {
console.log("component one mount method");
},
...
var ComponentTwo = React.createClass({
mixins: [LogOnMountMixin, MoreLogOnMountMixin],
componentDidMount: function () {
console.log("component two mount method");
},
console.log:
another mixin mount method mixin mount method component one mount method mixin mount method another mixin mount method component two mount method