Container

Container类也是 Flux 工具库中提供的一个工具类。其主要功能是将 Flux 的 Store 与 React 组件进行连接，使 React 组件能够访问 Store 中的 State。按照 Flux 的建议，Container 应该是一个不能访问props并且没有 UI 逻辑的类。Container类不需要手动建立，Flux 提供了可以直接对 React 组件类进行包裹的Container.create()方法，该方法要求 React 组件类中定义两个静态方法，分别是getStores()和calculateState()。

Container.create()方法可以接受两个参数，第一个参数是原始的 React 组件类，第二个参数是可选的包装参数。调用.create()方法后会返回一个新的 React 组件类。在默认情况下，Container 组件类是不能访问props的，如果需要访问props，可以通过在包装参数中使用{ withProps: true }来声明。并且在默认情况下，Container 组件类中的props和state如果没有发生任何改变，组件类是不会重新渲染的，要改变这个默认行为，可以在包装参数中使用{ pure: false }来改变。

以下给出一个创建 Container 组件类的示例。

import { Component } from 'react';
import { Container } from 'flex/utils';

class CargoContainer extends Component {
  static getStores() {
    return [CargoStore];
  }

  static calculateState(prevState) {
    return {
      cargo: CargoStore.getState()
    };
  }

  render() {
    return <CargoUI cargo={this.state.cargo} />;
  }
}

const container = Container.create(CargoContainer);