React Mixins介绍

发布时间：2023-04-10 14:11:59 所属栏目：教程来源：

导读：使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin 的场景都可以用组合组件这种模式来做到，参见 Mixins Are Dead. Long Live Composition

虽然组件的原则就是模块化，彼此之间相互独立，但是有时候

使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin 的场景都可以用组合组件这种模式来做到，参见 Mixins Are Dead. Long Live Composition

虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能，共享一部分代码。所以 React 提供了 mixins 这种方式来处理这种问题。

Mixin 就是用来定义一些方法，使用这个 mixin 的组件能够自由的使用这些方法（就像在组件中定义的一样），所以 mixin 相当于组件的一个扩展，在 mixin 中也能定义“生命周期”方法。

比如一个定时器的 mixin：

var SetIntervalMixin = {
componentwillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentwillUnmount: function() {
this.intervals.map(clearInterval);
}
};

var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getinitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // Call a method on the mixin
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});

React.render(
<TickTock />,
document.getElementById('example')
);
React 的 mixins 的强大之处在于，如果一个组件使用了多个 mixins，其中几个 mixins 定义了相同的“生命周期方法”，这些方法会在组件相应的方法执行完之后按 mixins 指定的数组顺序执行。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!