Controller View 模式

Posted HelloHello233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Controller View 模式相关的知识,希望对你有一定的参考价值。

参考: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了。

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

 

以上是关于Controller View 模式的主要内容,如果未能解决你的问题,请参考以下文章

Model-View-Controller MVC 设计模式

MVC模式:Massive View Controller?

Android DataBinding库(MVVM设计模式)

SSH----MVC框架模式与分层架构

Android强制Fragment重建View

IOS的MVC和MVVM模式简明介绍