参考：https://blog.andrewray.me/the-reactjs-controller-view-pattern/
Flux参考：http://www.cnblogs.com/hellohello/p/8024263.html
创造一个顶层组件来管理所有的state，并把这些state通过props传递给子组件。如
class HomePageController extends React.Component { componentDidMount() { Store1.on(‘change‘, this.onStoreChange); Store2.on(‘change‘, this.onStoreChange); } onStoreChange() { this.setState({ data1: Store1.getData(), data2: Store2.getData() }); } render() { // <HomePage /> has no internal state! return <HomePage data1={this.state.data1} data2={this.state.data2} />; } }
以上是store的更新事件处理方式，不理解的可以查看以上flux链接。
像上面这样提取一个顶层的controller有什么好处？
有了controller，可以更加灵活地组合使用组件。
一般情况下，一个页面有一个 <ShoppingCartView /> ，里面直接监听了 ShoppingCartStore。但以后如果需要一个页面有多个 <ShoppingCartView />，分别监听不同的 ShoppingCartStore，那就只能抽取一个ShoppingCartController出来，如下：
class ShoppingCartController extends React.Component { ... // You get component portability for free! render() { return <div> <ShoppingCart data={store1Data} /> <ShoppingCart data={store2Data} /> </div>; }
在以上的controller中就可以很简单的组合多个组件来使用了。
以上被组合的组件中没有state，即无状态组件（通过function创建）。
