我猜想大多数程序员都使用框架来开发应用程序，框架有助于程序员构建复杂的应用程序并节省时间。每天，程序员都可以看到大量的好坏框架的列表。本文，将分享一位程序员对于使用框架创建应用的例子，以及他为什么从React转换到Cycle.js。
React是很受欢迎的前端框架，它有一个很好的社区。但它可能不如大家说的那么好，大多数人开始使用React，而不考虑建立一个网络应用程序的更好方式。这种反思让我尝试了Cycle.js，这个新的框架变得越来越流行。在这篇文章中，我想解释Cycle.js的工作原理以及为什么我认为它比React更好。
什么是Cycle.js？
Cycle.js是一个功能和响应式的JavaScript框架。它将应用程序抽象为纯函数main（）。在函数编程中，函数应该只有输入和输出，没有任何副操作。在Cycle.js的main（）函数中，输入是来自外部世界的读取效应（source），而输出（sink）是对外部世界的写入效应。使用驱动程序来管理副操作。驱动程序是处理DOM效果，HTTP效果和网络套接字等的插件。
Cycle.js帮助建立用户界面，测试它们并编写可重用代码。每个组件只是一个可以独立运行的纯函数。
核心API只有一个功能，run：
它有两个参数，app和drivers。app主要是纯功能，drivers是需要处理副操作的插件。
Cycle.js将附加功能分成较小的模块。 它们是：
-
@cycle/dom-使用DOM的驱动程序集合; 它具有基于snabdomvirtual DOM库的DOM驱动程序和HTML驱动程序
-
@cycle/history - History API的驱动程序
-
@cycle/http - 基于超级用户的HTTP请求的驱动程序
-
@cycle/isolation - 具有作用域数据流组件的功能
-
@cycle/jsonp - 通过JSONP进行HTTP请求的驱动程序
-
@cycle/most-run - 大部分应用程序的run功能
-
@cycle/run - 使用xstream制作的应用程序的run功能
-
@cycle/rxjs-run - 使用rxjs制作的应用程序的run功能
Cycle.js编程实例
我们来看一些Cycle.js代码吧！我们将创建一个简单的应用程序，以演示它的工作原理。 我认为这个例子应该是一个很好的计数器应用程序的理想选择。我们将看到如何处理DOM事件并在Cycle.js中重新渲染DOM。
创建两个文件index.html和main.js. 整个逻辑是index.html只提供main.js文件，还要创建一个新的package.json文件，因此运行：
npm init -y
接下来，安装主要依赖项：
npm install @cycle/dom @cycle/run xstream --save
这将安装@cycle/dom，@ cycle/xstream-run和xstream。我们也需要babel，browserify和mkdirp，所以让我们安装它们：
npm install babel-cli babel-preset-es2015 babel-register babelify browserify mkdirp --save-dev
与Babel一起工作，请使用此内容创建一个.babelrc文件：
{
在package.json中添加脚本来运行应用程序：
"scripts": {
对于运行Cycle.js应用程序，使用npm开始。
就这样设置完成，我们可以开始编写一些代码。我们在index.html中添加一些HTML代码：
< !DOCTYPE html><html lang="en"><head>
我们创建了一个id为主的div。Cycle.js将连接到该div并在其中呈现整个应用程序。我们还包括thedist / main.js文件，这是将从main.js创建的被折叠和捆绑的JS文件。
现在是编写一些Cycle.js代码的时候了。 打开main.js文件并导入需要的所有依赖项：
import xs from 'xstream'; import { run } from '@cycle/run'; import { div, button, p, makeDOMDriver } from '@cycle/dom';
包括xstream，run，makeDOMDriver和可帮助我们使用Virtual DOM（div，button和p）的函数。
我们来写我们的main函数。它应该是这样的：
function main(sources) {
这是我们的main函数。它得到source并返回sinks。Source是DOM流，sink是虚拟DOM。
const action$ = xs.merge(
在这里，我们将两个流合并成一个单独的流，称为action $（后缀含有$的流的变量名称的约定）。一个是decrement点击，另一个是 increment按钮。我们将这两个事件分别映射到数字-1和+1。在合并结束时，action $ stream应该如下所示：
----(-1)-----(+1)------(-1)------(-1)------
下一个流是count$。它是这样创建的：
const count$ = action$.fold((acc, x) => acc + x, 0);
Fold功能非常适合此目的。它接受两个参数，accumulate和seed。seed首先被排出，直到事件发生。下一个事件与基于accumulate函数的seed 组合。它基本上是reduce（）的流。
我们的count$数据流收到0作为起始值，然后在count$的每个新值上，我们将其与count $ stream中的当前值相加。
最后，要使整个循环工作，我们需要调用main以下的run函数。
最后一点是创建虚拟DOM。 这是代码：
const vdom$ = count$.map(count =>
我们正在映射count $ stream中的数据，并返回流中每个项目的虚拟DOM。 虚拟DOM包含一个主要的div包装器，两个按钮和一个段落。 如你所见，Cycle.js正在使用JavaScript函数来处理DOM，但也可以实现JSX。
在主函数结束时，返回Virtual DOM：
return {
我们正在传递我们的main函数和一个DOM驱动程序，它连接到具有ID主体的div，并从该div获取事件流。 我们正在关闭我们的圈子，并使完美的Cycle.js应用程序。
这是它运行时：
为什么我从React切换到Cycle.js？
现在你了解了Reactive编程的基本概念，并在Cycle.js中看到了一个简单的例子，让我们来谈一谈为什么我会将它用于下一个项目。
设计网络应用程序时遇到的最大问题是处理不同来源的大型代码库和大量数据。我是React的粉丝，我在很多项目中都使用过，但是React没有解决我的问题。
我们来看看使用Cycle.js的一些利弊。
优点
-
大代码库
当应用变大时，React有一些问题。想象一下，100个容器中有100个组件，每个组件都有自己的样式、功能和测试，这是许多目录中许多文件中的许多代码行，很难浏览这些文件。
Cycle.js被设计为通过将项目拆分成独立的组件来处理大型代码库，这些组件可以被隔离和测试而没有副作用。没有Redux，没有副作用，一切都是纯数据流。
-
数据流
React中最大的问题是数据流。 数据流设计不是React的核心。开发人员已经尝试解决这个问题，我们有许多库和方法来尝试处理这个问题。最受欢迎的是Redux，但这并不完美。 Redux需要花费时间配置并且需要编写一个只适用于数据流的代码。
使用Cycle.js，程序员只需要编写使用数据执行某些操作的函数，Cycle.js将处理其他所有操作。
-
副作用
React有处理副作用的问题。 在React应用程序中没有标准的方法来处理副作用。有很多工具可以处理，但需要一些时间来设置和学习。最流行的是redux-saga，redux-effect，redux-side-effect和redux-loop。
Cycle.js不需要那么麻烦，只需包含想要的驱动程序（DOM，HTTP或其他）并使用它即可。驱动程序会将数据发送到纯函数，程序员可以更改并将其发送回将会呈现或执行其他操作的驱动程序。最重要的是它是标准化的，不需要依赖第三方库，很简单！
-
函数式编程
最后但并非不重要的是函数式编程。Cycle.js是建立函数式编程范式的很好选择。一切都不依赖任何外部状态。此外，没有类或类似的东西。 这更容易测试和维护。
缺点
-
社区
目前，React是较流行的框架，它随处可见。但Cycle.js不是，它的社区还有待完善。
-
学习一个新的范式
Cycle.js是一个响应式编程范例。响应式编程是一个不同的范例，需要花费一些时间习惯。
