Reactjs的Controller View模式

做一个可以利用props来控制和传递所有状态给其子组件的顶级组件是一件非常酷的事情

不要和“MVC”混淆了,只有能够控制和传递所有的“state”的顶层组件,我们才叫它"view controller"或者"controller view"

例如:<HomePage />,我们创造一个<HomePageController/>,

这个组件是在render方法里面利用props方法来传递所有我们需要的信息的

// Controller views are very simple
class HomePageController extends React.Component {
    // Normal Flux store listening
    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} />;
    }
}

猜你喜欢

转载自blog.csdn.net/qq_31687021/article/details/89364568
今日推荐