本文来自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。