• 请使用高阶组件而不是Mixin
    • 简单的例子
    • 更加详细的例子
  • 参考资料:

    请使用高阶组件而不是Mixin

    简单的例子

    1. // 使用mixin
    2. var WithLink = React.createClass({
    3.   mixins: [React.addons.LinkedStateMixin],
    4.   getInitialState: function () {
    5.     return {message: 'Hello!'};
    6.   },
    7.   render: function () {
    8.     return <input type="text" valueLink={this.linkState('message')}/>;
    9.   }
    10. });
    12. // 使用高阶组件的做法
    13. var WithLink = React.createClass({
    14.   getInitialState: function () {
    15.     return {message: 'Hello!'};
    16.   },
    17.   render: function () {
    18.     return <input type="text" valueLink={LinkState(this,'message')}/>;
    19.   }
    20. });

    更加详细的例子

    1. // 使用Mixin Mixin
    2. var CarDataMixin = {
    3.   componentDidMount: {
    4.     // fetch car data and
    5.     // call this.setState({carData: fetchedData}),
    6.     // once data has been (asynchronously) fetched
    7.   }
    8. };
    10. var FirstView = React.createClass({
    11.   mixins: [CarDataMixin],
    12.   render: function () {
    13.     return (
    14.       <div>
    15.         <AvgSellingPricesByYear country="US" dataset={this.state.carData}/>
    16.         <AvgSellingPricesByYear country="UK" dataset={this.state.carData}/>
    17.         <AvgSellingPricesByYear country="FI" dataset={this.state.carData}/>
    18.       </div>
    19.     )
    20.   }
    21. });
    23. // 使用高阶组件
    24. var bindToCarData = function (Component) {
    25.   return React.createClass({
    26.     componentDidMount: {
    27.       // fetch car data and
    28.       // call this.setState({carData: fetchedData}),
    29.       // once data has been (asynchronously) fetched
    30.     },
    32.     render: function () {
    33.       return <Component carData={ this.state.carData }/>
    34.     }
    35.   });
    36. };
    38. // 将你的组件使用高阶组件包裹起来
    39. var FirstView = bindToCarData(React.createClass({
    40.   render: function () {
    41.     return (
    42.       <div>
    43.         <AvgSellingPricesByYear country="US" dataset={this.props.carData}/>
    44.         <AvgSellingPricesByYear country="UK" dataset={this.props.carData}/>
    45.         <AvgSellingPricesByYear country="FI" dataset={this.props.carData}/>
    46.       </div>
    47.     )
    48.   }
    49. }));

    参考资料:

    • @dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750">Mixins are dead - Long live higher ordercomponents
    • Mixins are considered harmful
    • Stackoverflow: Using mixins vs components for code reuse
    • Stackoverflow: Composition instead of mixins in React