Mixins

NOTE: 使用 ES6 class 定义的组件已经不支持 mixin 了，因为使用 mixin
的场景都可以用组合组件这种模式来做到，参见 @dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.xe4ubc7lu">Mixins Are Dead. Long Live
Composition

这里暂时留存这部分内容。

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

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

比如一个定时器的 mixin：

  1. var SetIntervalMixin = {
  2.     componentWillMount: function() {
  3.         this.intervals = [];
  4.     },
  5.     setInterval: function() {
  6.         this.intervals.push(setInterval.apply(null, arguments));
  7.     },
  8.     componentWillUnmount: function() {
  9.         this.intervals.map(clearInterval);
  10.     }
  11. };
  13. var TickTock = React.createClass({
  14.     mixins: [SetIntervalMixin], // Use the mixin
  15.     getInitialState: function() {
  16.         return {seconds: 0};
  17.     },
  18.     componentDidMount: function() {
  19.         this.setInterval(this.tick, 1000); // Call a method on the mixin
  20.     },
  21.     tick: function() {
  22.         this.setState({seconds: this.state.seconds + 1});
  23.     },
  24.     render: function() {
  25.         return (
  26.             <p>
  27.                 React has been running for {this.state.seconds} seconds.
  28.             </p>
  29.         );
  30.     }
  31. });
  33. React.render(
  34.     <TickTock />,
  35.     document.getElementById('example')
  36. );

React 的 mixins 的强大之处在于，如果一个组件使用了多个 mixins，其中几个 mixins
定义了相同的“生命周期方法”，这些方法会在组件相应的方法执行完之后按 mixins
指定的数组顺序执行。