React.js 概览

Facebook开源了React，这是该公司用于构建反应式图形界面的JavaScript库，已经应用于构建Instagram网站及Facebook部分网站。最近出现了AngularJS、MeteorJS 和Polymer中实现的Model-Driven Views等框架，React也顺应了这种趋势。React基于在数据模型之上声明式指定用户界面的理念，用户界面会自动与底层数据保持同步。与前面提及的框架不同，出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML。

功能

React 框架本身作为 MVC 当中的 V 存在, 提供两个功能:

• 渲染和维护 DOM
• 监听 DOM 的事件

其他的好处是:

• React Component 设计得非常适合模块化
• Component 和 DOM 得益于 Virtual DOM 的 diff 和合并操作, 有性能提升
• 没有 Model 的复杂关系, 编写应用逻辑非常清晰
• 服务端渲染

调试工具

Chrome 扩展, 很方便查看 Component 对应的 props 和 state
https://github.com/facebook/react-devtools

由于 Chrome 已经有 JavaScript 自动编译的功能, 加上 React 的刷新方式
可以做到代码热替换, 在有修改之后快速更新界面上的代码

Flux

前端单页面的应用常用的架构之间简单的区别看这里:

实际当中结构会更复杂一点, 比如 Backbone 之间模块的划分, 至少可以发现不是图上展示的单向的一个循环:

而且实际上 MVC 很容易被写成这样, 在 View Model 之间产生复杂的关系:
而 Flux 对 MVC 做了调整, 回到近似 MVC 的单向循环当中:

•