前端 MVC 的变革

Angular

双向绑定

• 数据对象发生变更以后，要及时更新 DOM 树；
• 用户操作改变 DOM 树以后，要回头更新数据对象。

依赖注入

过滤器

React + Redux

这两个放到一起说，是因为 React 其实只是一个用户界面的库，它的组件化做得特别出色，但本身的贡献主要还是在视图层；而 Redux 是一个 JavaScript 状态容器，提供可预测的状态管理能力。有了 Redux，才能谈整个 MVC 框架。

JSX

Redux 对状态的管理

image.png

那为什么 Redux 能将复杂的状态简化？我觉得有这么几个原因：

• 整个流程中数据是单向流动的，状态被隔离，严格地管理起来了，只有 Store 有状态，这就避免了散落的状态混乱而互相影响。
• 无论多么复杂的 View 上的操作或者事件，都会统一转换成若干个 Redux 系统能够识别的 Action。换句话说，不同的操作，只不过引起 Action 的 type 不同，或者上面承载的业务数据不同。
• Reducer 是无状态的，它是一个纯函数，但它的职责是根据 Action 和 Store 中老的状态来生成新的状态。这样，Store 中状态的改变也只有一个来源，就是 Reducer 的操作。

公众号：码农架构