MVC时代的终结，接下来的函数式响应型编程会成为未来的霸主

React.js，Elm，Cycle.js和其他UI框架引入了一种构建用户界面的新方法。通过将函数式响应型编程的原理应用于UI开发中，他们甚至改变了我们对用户界面的看法。在任何时候，这些方法都只是简单地扼杀了MVC及其兄弟姐妹（MVP，MVVM等）看似不可避免的优势。本文接下来简要介绍这种构建用户界面的新方法，并列出其与传统方法相比的一些优势。这些因素如此强大，以至于在我看来，我们现在正目睹着mvc时代的终结。

函数式响应型UI开发的概念

从表面上看，像React.js这样的框架，Redux架构，Elm和Cycle.js看起来完全不同。 Redux应用程序最初似乎与常规的JavaScript应用程序类似，强调函数式编程。 Elm应用程序带有自己的语言，而Cycle.js应用程序只包含以惊人的方式打结在一起的反应流。

上面的图片展示了函数式响应型UI开发的概念。首先要注意的是，所有的变化，事件和更新都是以单一方向流动形成一个循环。下面将简要介绍一下这个周期。

函数式响应型UI开发

该循环由四个数据结构（State，Virtual DOM，Event和Action）和四个组件（View()-Function，DOM-Driver，ActionCreator和Updater）组成。 DOM-Driver由框架提供，而其他组件则由应用程序开发人员来实现。

假设我们的应用程序，一个待办事项列表，已经运行了一段时间，用户按下按钮在待办事项列表中创建一个新条目。这将导致DOM中由按钮单击的事件，DOM-Driver捕获并转发给我们的ActionCreator。

ActionCreator接受DOM事件并将其映射到一个动作。动作是命令模式的一个实现，即它们描述了应该做什么，但是不要自己修改任何东西。在我们的例子中，我们创建一个AddToDoItemAction并将其传递给Updater。

更新程序包含应用程序逻辑。它保持对应用程序当前状态的引用。每当它从ActionCreators中的一个接收到一个动作，它就会产生新的状态。在我们的例子中，如果当前状态包含三个todo-items并且我们收到AddToDoItemAction，那么Updater会创建一个新的状态，包含现有的todo-items加上一个新的状态。

状态被传递给View（）函数，它创建了所谓的虚拟DOM。顾名思义，虚拟DOM并不是真正的DOM，但它是一个描述DOM应该如何的数据结构。上面的代码片段显示了一个简单的

的虚拟DOM的例子。后面的文章将详细解释虚拟DOM及其优点。

虚拟DOM被传递给DOM-Driver，它将更新DOM并等待下一个用户输入。就这样，循环结束。

函数式响应型UI开发的优点

函数式响应型UI开发与传统方法相比具有三大优势，它们分别是：简单的测试，全面的事件流程和便捷的版本切换。

简单直截了当的测试

View（）函数和ActionCreators是简单的映射，而Updater在它接收的Actions上执行折叠（通常也称为reduce）。所有的组件都是纯粹的功能，纯粹的功能非常容易测试。纯函数的结果只取决于输入参数，并没有任何副作用。要测试一个纯函数，创建输入参数就足够了，运行“测试中的函数”并比较结果。没有模型，没有依赖注入，没有复杂的设置，没有其他技术是必要的，从测试中获得乐趣。

事件的全面流程

反应式编程非常有趣 - 除非不是。图形用户界面的控制流程固有地基于事件。应用程序必须对用户或服务器的按钮点击，键盘输入和其他事件做出反应。应用反应技术，无论是观察者模式，数据绑定还是反应流，都是自然而然的。不幸的是，这些技术是有代价的。如果组件A调用组件B，那么在IDE或调试器中查看连接是很简单的。但是如果两个部分都是通过事件连接的话，那么这种关系就不那么明显，反而因为应用程序越大，就越难理解它的内部。

函数式响应型应用程序的体系结构通过定义所有组件必须遵循的事件的简单流程来避免这些问题。

无论应用程序增长到多大，事件的流向都不会改变。

功能性反应式应用程序可以让你的应用程序及时来回移动版本，如果我们存储初始状态和所有操作，我们可以使用一种称为“事件源”的技术。通过回放这些操作，我们可以重新计算应用程序所处的每个状态。如果我们只回放最后的n-1，n-2，n-3 ...个操作，实际上我们可以及时退后一步。通过修改记录下来的操作，我们甚至可以改变过去。正如你可以想象的那样，在开发和修正bug的过程中，这样可以非常方便。

总结

到目前为止，我们只是触及了函数式响应型UI开发的表面，但是这种方式相对于传统的mvc具有一些巨大的优势。