Question

我正在开发一个具有助焊剂模式的项目，该模式使用助焊剂容器功能＆＃34; createFunctional＆＃34;像这样：

import {Container} from 'flux/utils';
import View from './MyView.js';
import AppStore from './AppStore.js';

function getStores() {
  return [
    AppStore
  ];
}

function getState() {
  var state = {
    pie: AppStore.getState(),
  };

  return state;
}

export default Container.createFunctional(View, getStores, getState);

我想更好地理解这些代码，但我发现很难找到有关此功能的文档。

我猜这是以某种方式将存储和状态函数绑定到视图，并且它与此代码（我根据example on the flux website进行了重构）在某种程度上相同：

class MyView extends Component {
  static getStores() {
    return [AppStore];
  }

  static calculateState(prevState) {
    return {
      pie: AppStore.getState(),
    };
  }

  render() {
    return <div>blah..</div>;
  }
}

const container = Container.create(CounterContainer);

Answer 1

调查source code相当简单。

它创建一个容器组件。该组件订阅了所有给定的商店。当商店发生变化时，它会使用getState功能从中获取任何重要信息。

然后getState的结果存储在容器的this.state中。

容器的render函数只需呈现View，将整个状态（getState的结果）作为属性传递。

简而言之，容器监视商店中的更改并将其作为属性传递给视图。这简化了组件的设计，因为他们不必处理状态和订阅商店。

助焊剂容器功能的目的是什么＆＃39; createFunctional＆＃39;？

1 个答案: