使用高阶组件-优快云博客

本文链接：https://blog.youkuaiyun.com/shrfgbfg/article/details/135647666

本文比较了React中使用mixins和高阶组件处理异步数据加载与状态管理的方式，展示了如何通过`LinkedStateMixin`和自定义`CarDataMixin`实现组件间数据共享，并演示了如何用高阶组件封装组件以简化状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 使用mixin
var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function () {
    return {message: 'Hello!'};
  },
  render: function () {
    return <input type="text" valueLink={this.linkState('message')}/>;
  }
});

// 使用高阶组件的做法
var WithLink = React.createClass({
  getInitialState: function () {
    return {message: 'Hello!'};
  },
  render: function () {
    return <input type="text" valueLink={LinkState(this,'message')}/>;
  }
});



// 使用Mixin Mixin
var CarDataMixin = {
  componentDidMount: {
    // fetch car data and
    // call this.setState({carData: fetchedData}),
    // once data has been (asynchronously) fetched
  }
};

var FirstView = React.createClass({
  mixins: [CarDataMixin],
  render: function () {
    return (
      <div>
        <AvgSellingPricesByYear country="US" dataset={this.state.carData}/>
        <AvgSellingPricesByYear country="UK" dataset={this.state.carData}/>
        <AvgSellingPricesByYear country="FI" dataset={this.state.carData}/>
      </div>
    )
  }
});

// 使用高阶组件
var bindToCarData = function (Component) {
  return React.createClass({
    componentDidMount: {
      // fetch car data and
      // call this.setState({carData: fetchedData}),
      // once data has been (asynchronously) fetched
    },

    render: function () {
      return <Component carData={ this.state.carData }/>
    }
  });
};

// 将你的组件使用高阶组件包裹起来
var FirstView = bindToCarData(React.createClass({
  render: function () {
    return (
      <div>
        <AvgSellingPricesByYear country="US" dataset={this.props.carData}/>
        <AvgSellingPricesByYear country="UK" dataset={this.props.carData}/>
        <AvgSellingPricesByYear country="FI" dataset={this.props.carData}/>
      </div>
    )
  }
}));