HOF高次成分と高次関数HOC（高次のFunc / COMP）

まず、高次機能（コンポーネント）、役割は何であるとは何でしょうか？

親クラスのサブクラスのメソッドの方法を継承することができ、（逆継承）という関連コンポーネント通信（Reduxの）、サブクラス親プロセスは
、クラス（機能）を解決するために機能クロス/多重化機能などでは、関数は、クラスがそれ自身の未定義のメソッドを有するようにクラス/（継承）を通過させることによって、クラス/関数を返します。

例えば、react-redux高次成分を使用して接続する方法：

React Redux接続：

const HOC = connnect(mapStateToProps)(Comp);
// connect为柯里化函数  实际为 =>
function connect(mapStateToProps) {
  // ...
  return function(Comp) {
    // ...
  }
}
// 使用箭头函数则为
const connect = mapStateToProps => Comp => {...};

第二に、より高次の機能によって、2つの独立した通信機能を実現します

要件はじめに

一つのクラスSubClass（サブクラス）などの範囲内のデータstateオブジェクト、および有するsetState和getState2つの関数法。今、私たちは願ってSupClass1呼び出すために（スーパー/親1） SubClass（サブクラス）のsetState方法、およびSupClass2（超/ 2親が）によって行ったgetState結果を出力する方法。

子供がサブであることに注意してください、SUPの父

ファイルのディレクトリ

├  ├── SubClass.js              # 子类
├  ├── SupClass1.js             # 父类1
├  ├── SupClass2.js             # 父类2
├── index.html

SubClassクラスデータ状態を追加し、特定のクエリと変更機能を

// SubClass.js
class SubClass {
  constructor(args = {}) {
    this.state = {
      ...args,
    };
  }
  // 赋值时需要提供键和值
  setState = (key, val) => {
    this.state = {
      [key]: val,
    };
  };
  getState = (key) => {
    if (key in this.state) {
      return this.state[key];
    }
    // 当然我们希望严谨点
    const err = '无效key值';
    throw err;
  };
}

私たちはしてみてくださいSubClassどのように機能します

// index.html
const subcls = new SubClass({name: 'xiaobe'});
const res = subCls.getState('name');
console.log('res', res);
// 输出xiaobe,妥妥的

我々が与える次のSupClass1与えられたsetState能力

class SuperClass1 {
  set(key, val) {
    // SuperClass1里没有setState方法！
    this.setState(key, val);
  }
}

直接実行のクラスならばget方法は確かに間違っていることでしょう。だから我々はする必要がSupClass1何かをします。

私たちは与える必要があるSuperClass1クラスに増加させる方法をsetState継承を使用することができ、

// SuperClass1.js
class SuperClass1 extends SubClass {
  constructor(props) {
    super(props);
  }
  set(key, val) {
    // 父类1上使用子类的setState方法
    this.setState(key, val);
  }
}

// index.html
const supCls1 = new SuperClass1({name: 'sup-xiaobe'});
const res = supCls1.getState('name');
console.log(res);
// 也能输出sup-xiaobe

しかし、あなたが相続の仕方をしたい場合は上書きされ、多くの問題を引き起こす二つの非成分の場合は、継承を使用して親子関係の下で想像し、独自の方法につながるでしょう！

したがって、我々はまだ高次成分を達成する必要があります。

まず、サブクラスが与えるSubClassエントリを追加HOC

class SubClass {
  // ...
  HOC(cls) {
    // 需要调用SubClass类的方法，所以需要存一份其this
    const sub_this = this;
    // 父类除了以下新增的两个方法，其他无任何变化地返回！
    return class extends cls {
      constructor(props) {
        super(props);
        // 此处this指向该子类，sub_this指向SubClass类
        this.getState = sub_this.getState;
        this.setState = sub_this.setState;
      }
    }
  }
  // ...
}

その後、我々は親クラス1に来るSupClass1（HOCを呼び出す）インスタンス化する前にアップグレード！

// index.html
const subCls = new SubClass();
// 在子类实例化后给父类加上HOC方法
const supClsHoc1 = subCls.HOC(SuperClass1);
// 实例化父类
const supCls1 = new supClsHoc1();
// 重新定义state.name
supCls1.set('name', 'sup-xiaobe');

console.log(supCls.getState('name'));
// 输出sup-xiaobe

同様に完了SupClass2

// SupClass2.js
class SuperClass2 {
  get(key) {
    return this.getState(key);
  }
}

// 最终的index.html
const subCls = new SubClass({name: 'xiaobe'});
const supClsHoc1 = subCls.HOC(SuperClass1);
const supClsHoc2 = subCls.HOC(SuperClass2);
const supCls1 = new supClsHoc1();
const supCls2 = new supClsHoc2(); 

supCls1.set('name', 'sup-xiaobe');
const res = supCls2.get('name');
console.log('res', res);

通信のような簡単な基本的なコンポーネントは完了です。

この考え方によると、グローバル変数Store.jsに似て包装することができます

はじめに戻って---