请使用高阶组件而不是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. }));

参考资料: