使用 Meteor 和 React 开发 Web App

本文来自CMeteor社区的成员jinglei。文中讨论了Meteor与React开发Web App的优势所在，以及Meteor在现代Web开发中扮演的角色。此外，本文还简要阐述了Meteor REST WebSocket，Flux概念，Relay和GraphQL等对于Meteor社区的影响。以下是文章节选：

Flux 的核心概念是单向数据流，利用观察者模式保证数据源只来自于一个地方。

如上图。Flux 主要由三部分: Dispatcher, Store 和 View (React Components) 组成。

Action (或者叫 Action Creator) 是 Dispatcher 的辅助函数，主要是用来描述由 View 产生的用户互动或者其他触发事件。Action Creator 会打包用户互动来生成对象，可以看做是 Flux 的第四部分。

Dispatcher 类似一个中央集线器，由一堆 Store 的回调函数组成。

Store 负责保存应用的状态和逻辑，在其外部的代码是不涉及数据管理的；它自己也不产生数据，只能从外部获得新数据。Store 对 Action 进行反馈，然后发出一个数据状态改变的事件。Controller-View 监听事件，一旦触发就从 Store 获取相应数据。这样就能够保证数据的单向流动，使逻辑更简单。

Meteor 完全可以作为一种 Flux 的实现。例如使用 FlowRouter 作为 Dispatcher，MiniMongo 作为 Store。这样可以为 React 带来很好的数据和逻辑状态的管理；反过来，React 也可以为 Meteor 带来前端模块化，单向数据流模式，使代码更少且更好维护；另外 React 的 Virtual Dom 机制也为会 Meteor 前端渲染带来性能上的提高。所以我说他们是 Naturally Fit。

上图就是一个典型的 React Meteor App。个人感觉 Flux 更多是面向 Chat Based App，所以没有涉及到 routing。在 Meteor，很多时候 Router 其实是一个天然的 Dispatcher。而 Meteor 客户端自带的 MiniMongo 可以作为 Store。对于 View，如图中可以使用一个父组件来监听数据的变化，子组件负责界面渲染和互动。另外一个方案是使用高阶组件 HOC 来包裹 UI 组件。高阶组件负责数据查询，子组件负责渲染等。在简单情况下，单个组件就可以了，Controller-View 可以和 UI 渲染在一个 Component 里。如果程序复杂，也可以使用 Meteor 的 Tracker.autorun 来建立一个独立的 Store。