请使用高阶组件而不是Mixin
优质
小牛编辑
140浏览
2023-12-01
简单的例子
// 使用mixinvar 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 Mixinvar 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> ) }}));
参考资料:
- <a href="https://medium.com/@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