Controller View 模式

Posted 2020-10-17 HelloHello233

参考：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中就可以很简单的组合多个组件来使用了。对比原来的用法，抽取controller之前，每个组件的状态都是与这个组件要用的store是相互关联的，抽取之后，实际上是把组件中的状态（store）都抽取出来，对store的监听都放到controller中，controller中的子组件变为无状态组件，需要controller通过props传入数据，以及回调函数。在回调函数中修改对应的已经被抽取出来的store数据（这个过程应该通过dispatcher发送action来实现，而不是直接修改store），store发生变化，触发controller中的回调，调用setState，重新渲染界面。

　　如果子组件可能在多个页面有使用，则应该把这个组件做成无状态组件，通过外部的contaoller 通过 props传递数据和回调，这样使用起来更加方便。

　　这种方式下，假如子组件要发送Action了，怎么处理？可以在controller中写一个函数调用dispatcher来发送Action，然后把这个函数传递子组件来调用，或者直接在controller中引入action creator，把action creator的方法传递给子组件。子组件调用这些方法就可以发送action了。

　　子组件其实也不一定要是无状态组件，它也可以有自己的状态（仅仅在组件内部用到）