第16章架构模式

React主要功能在于渲染HTML。可以将其看成是MVC中的V，它不会影响到组件中直接调用AJAX请求之类的操作：

var TakeSurvey=React.CreateClass({
    getInitialData：function(){
        return{
            survey:null
        }；
    },componentDidMount:funciton(){
        $.getJSON('/survey/'+this.props.id,function(json){
            this.setState({survey:json});
        });
    },render:function(){
        return <div>{this.state.survey.title}</div> } });

路由@H_502_49@
路由在单页面应用里为URL指定处理器函数。假设要为URL/surveys运行一个函数，函数的功能是从服务器加载用户，然后渲染`<LIstSurveys>`组件。

路由有很多种，在服务器端也存在路由，有一些路由可以在客户端和服务器端运行。

React仅仅是一个一个的渲染类库，没有路由的功能，不过有很多路由模块可以搭配React使用。

Backbone.Router:

Backbone是单页面应用类库，采用了MVX（Model-View-Whatever）架构。其中X指代控制器（Controller），通常指代的是路由。对Backbone来说就是如此。

Backbone是模块化的，你可以只用它的路由功能。它可以和React很好的搭配在一起使用。例如：

var SurveysRouter =Backbone.Router.extend({
    routes:{
        "surveys":"list"
    },list:function(){
        React.renderComponent(
            <ListSurveys />,document.querySelector('body')
        );
    }
});

路由需要处理URL中动态的部分和queryString。Backbone.Router具备这样的功能，示例如下：

// surveys_routers.js
varSurveysRouter=Backbone.Router.extend({
    routes:{
        "list","surveys/:filter":list:function(filter){
        React.renderComponent(
            <ListSurveys filter={filter}/>,0)">'body) ); },});

在上面的例子中，给定一个比如/surveys/active这样的URL地址，那SurveysRouter#list的参数filter就是active。

Aviator

与Backbone.Router不同，Aviator是一个独立的路由类库。

在Aviator中，路由定义与RoutetTarget是相互独立的。即Aviator不关心RouteTarget的实现和行为，仅试着调用赋值在它上面的方法。

比如这样一个RouteTarget：

@H_301_111@// surveys_route_target.js varSurveysRouteTarget={ list:function(){ React.renderComponent( <ListSurveys>,docment.querySelector('body'); ); } };

与这个对象对应，需要有一份路由的配置（整个应用只能有一个唯一的路由配置），这个配置通常写在另一个独立的文件中。

@H_301_111@// routes.js Aviator.setRoutes({ '/surveys':{ target:UsersRouteTarget,0)">'/':'list' } }); //让Aviator把url分派到RouteTarget Aviator.dispatch();

设置RouteTarget处理函数：

@H_301_111@// route.js Aviator.setRoutes({ '/surveys':{ target:usersRouteTarget,0)">'list',0)">'/:filter':'list' } }); // surveys_route_target.js varSurveysRouteTarget={ list:function(request){ React.renderComponent( <ListSurveys filter={request.param.filter}/>,doucument.querySelector('body') ); } }

Aviator有一个很棒的特性就是可以使用多个RouteTarget，例如下main这样的路由配置：

@H_301_111@// route.js Aviator.setRoutes({ target:AppRouteTarget,0)">'/*':beforeAll,0)">'list' 'list' } });

对于'/surveys/active'这样的URL，Aviator会先调用appRouteTarget.beforeAll在调用UsersRouteTarget.list——只要匹配，Action的数量并不受限制。你还可以定义路由离开时的执行函数，当用户从匹配的路由离开时，定义过的执行函数会从内到外依次执行。

react-router

react-router不同于其他的路由，它完全是有ReactComponent构成的。

路由被定义成了组件，路由的处理器也是组件。

按照react-router的写法路由是这样的：

var appRouter=(
    <Routes location="history">
        <Route title="SurveyBuilder" handler={App}>
            <Route name="list" path="/"handler={ListSurveys}/}
            <Route title ="Add Survey to SurveyBuilder"name="add" path="/add_survey" handler={AddSurvey}/>
            <Route name ="edit" path="/surveys/:surveyId/edit" handler={EditSurvey}/>
            <Route name="take" path="/surveys/:surveyId"handler={TakeSurveyCtrl} />
            <NotFound title="page Not Found"handler={NotFoundHandler}/>
        </Route>
    </Routes>
);

每一个处理器就是一个对应着特定页面的组件。把上面的路由作为顶层的组件渲染来启动它。

React.renderComponent(
    appRouter,document.querySelector('body')
);

就像其他的路由一样，react-router也有类似的参数概念。比如路由'/surveys/：surveyId'会把surveyId属性传给TakeSurveyCtrl组件。

Link是react-router提供的很酷的特性之一。你可以使用它来导航，它可以自己对应到路由上。而且它还能自动给链接添加active样式，标记当前活动页面。

使用react-router Link组件后组件看起来是这样的：

varMainNav=React.createClass({
    render:function(){
        retrun(
        <nav className='main-nav' role='navigation'>
            <ul className='nav navbar-nav'>
                <li><Link to='list'>All Surveys </link></li>
                <li><Link to="add" >AddSurvey</Link></li>
            </ul>
        </nav>
        );
    }
});

Om（ClojureScript）

Om是比较流行的React的ClojureScript接口。通过ClojureScript的不可变数据结构，Om可以飞快地重新渲染整个应用，而且每个操作都可以很容易地被存为快照，用来实现撤销等功能。

Om组件看起来是这样：

(ns example
(:require [om.core :as om :include-macros true]
          [om.dom:as dom :include-macros true]))
(defn App[data owner]
    (reify
        om/IRender(render[this]
        (dom/h1 nil (:text data)))))
(om/rootApp {text "Survey Builder"}
    {:targer(. js/document (querySelector "body"))})

它将被渲染为<h1>SurveyBuilder</h1>

Flux@H_502_49@
前面的架构模式都是随着React的开源而出现的。但Flux是React的原作者从一开始就设计好的。

Flux是Facebook引入的架构模式。它为React提供了一套单向数据流模式，这个模式很容易审查数据修改的过程和原因。实现Flux起来只需要很少的脚手架和代码。

Flux由三个主要的部分组成：Store，Dispatcher和视图（即React Component）。Action作为创建Dispatcher的语义化接口的辅助方法，可以当做Flux模式的第四部分。

顶层的React组件类似于一个控制视图（Controller-View）。控制视图的组件与Store进行交流并协助其与子组件进行通信。这与iOS开发中的控制视图差别不大。

Flux模式里的每个部分都是独立的，强制进行了严格的隔离，通过隔离来保证每个部分都易于测试。

Flux的数据流

Flux使用的是单向数据流。这在已有的MVC框架中显得很特别，但也带来了一些独特的好处。因为Flux没有用双向绑定，所以他的应用很容易审查问题。状态是在Store（Store是Flux中数据的拥有者）中维护的，因此很容易跟踪。Store通过change方法传送数据，触发视图的渲染。用户的输入行为会出发Action通过Dispatcher进行分派，以此传送数据到专门处理特性Action的Store中。