reactJS -- 10 独立组件间共享Mixins

2019独角兽企业重金招聘Python工程师标准>>>

一. 概述(ES6不支持，需要插件)

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

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

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

二.事例

使用需要引入插件： https://github.com/brigand/react-mixin

安装依赖包 ：

npm install --save react-mixin@2

在所有组件间都可以调用同一个log 方法。

1.创建 Minxins.js 

const MixinLog{
  log(){
    console.log("abcd......");
  }
};
export default MixinLog; //暴露出来

2.在bodyindex 中引入 Minxins.js

import react-mixin from 'react-mixin';
import MixinLog from './Mixins.js';

3.将方法加入到BodyIndex类中

BodyIndex.propTypes = {
  userId : React.PropTypes.number.isRequired, //必须参数
}

BodyIndex.defaultProps = defaultProps; // 默认值

ReactMixin(BodyIndex.prototype, MixinLog);

4.调用生命周期函数

const MixinLog = {
  //调用生命周期函数
  componentDidMount(){
      console.log("componentDidMount.log");
  },
  log(){
    console.log("abcd......");
  }
};
export default MixinLog; //暴露出来

转载于:https://my.oschina.net/u/2991733/blog/1154041