reactJS -- 10 獨立組件間共享Mixins

一. 概述(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; //暴露出來