Cycle.js是最容易访问的JavaScript FRP框架，我们还没有机会被它所震撼和迷惑。其结果是它有足够的训练轮，让你对你的摇摇晃晃的方式。缺点：实现起来比理解起来容易，文档也没有多大帮助。
开始运行的最好方法是使用Cycle自己的create-cycle-app(通过npm或Yarn按名称安装，就像您所做的那样)。您最终将得到与下面所示类似的结果，但是已经准备好了启动开发服务器或部署构建所需的所有脚手架。为了说明起见，我们对其进行了一些简化。
1import {run} from '@cycle/run';
2import {div, makeDOMDriver} from '@cycle/dom';
3import xs from 'xstream';
4
5const main = function(sources) {
6 const vtree$ = xs.of(
7 div('My Awesome Cycle.js app')
8 );
9 const sinks = {
10 DOM: vtree$
11 };
12 return sinks;
13};
14
15const drivers = {
16 DOM: makeDOMDriver('#app')
17};
18
19run(main, drivers);
💡来源？水槽？循环交通在环境理论的贸易行话中是一种抽象。老实说，这不是一个抽象的，这将有助于多。将源视为读效果，Intent的产品，将汇视为写效果，模型的产品。
Cycle.js中的cycle是指用户界面和应用程序的表示逻辑之间的循环流。UI是逻辑的输入。逻辑是UI的输入。很奇怪，不是吗？Cycle的诀窍是它知道如何播种这个程序化的衔尾蛇，并通过我们导入的run方法让轮子转动。
Create-Cycle-app的启动输出还有很多不尽如人意之处，这并不是说我们不欣赏简单性。从一大堆静态的未设置样式的文本中找到下一步的位置有点困难。因此，为了说明基本知识，我们制作了一个常年幻灯片应用程序的循环版本)。你可以自由地克隆repo或在Glitch](https://glitch.com/edit/# ！/cyclejs?path=public/index.html:1:0)上重新混音来踢轮胎。
下面是一个快速浏览的代码是什么使循环旋转。
溪流数量
1const width$ = sources.DOM.select('.width').events('input')
2 .map(e => e.target.value).startWith(410);
3...
这是一条小溪。它由在width类的DOM源中接收的input事件组成。可以将其视为一个数组，但它包含的不是空间上的值，而是时间上的值。我们startWith值410，因为否则我们将向下游传递NULL到消耗Width$的任何东西。`$‘不执行任何操作。这只是流的命名约定。
💰仅供参考：$$是流的约定。
xstream
1const vtree$ = xs.combine(index$, width$).map(([index, width]) =>
对于反应式流库来说，这是一个买方市场。Create-Cycle-app附带了xstream，这是一个灵活、轻量级的库，专门为Cycle by Cycle的创建者构建的。在最简单的情况下，它可以使溪流
1const vtree$ = xs.of(
2 div([div('A virtual DOM tree stream?'), div('Yup.')])
3);
它是好吧，documented，，你可以让它在大多数情况下工作得足够好，而不需要学习它所包含的26种方法中的一半。也就是说，您可以使用您喜欢的任何库来代替它。
超级脚本
1import {input, div, p, img} from '@cycle/dom';
Cycle使用构建在Hyperscript.上的DOM抽象库对于来自Reaction的任何人来说，上面的导入应该都很舒服。下面的实现……可能不是那么简单。
1div({style: {
2 textAlign: 'center',
3 fontFamily: 'sans-serif',
4 fontWeight: '300'
5}}, [
6 div({style: {marginBottom: '20px'}}, [
7 p({style:{color: '#858576', fontSize: '32px'}},
8 assets.captions[index]
9 ),
10 input(
11 {
12 style: {width: '100px', cursor: 'pointer'},
13 attrs: {
14 class: 'width',
15 type: 'range',
16 min: 40,
17 max: 720,
18 value: width
19 }
20 }
21 )
22 ]),
23 div([
24 img({
25 style: {borderRadius: '12px', cursor: 'pointer'},
26 attrs: {
27 src: assets.slides[index],
28 alt: assets.captions[index],
29 width: `${width}px`
30 }
31 })
32 ])
33])
不，您不必使用内联样式。是的，您确实需要导出从单个元素派生的树。
1element(opts, children)
它比乍一看更直观，非常灵活，并且支持基本上所有在Html sun.下的东西是的，您可以使用JSX，但既然已经包含了这一点，为什么不试一试呢？
驱动
可以将驱动程序视为Cycle应用程序与其周围环境之间的桥梁，无论它是通过DOM驱动程序连接到人类用户，还是通过HTTP驱动程序连接到XHR。
1import {makeDOMDriver} from '@cycle/dom';
2...
3const drivers = {
4 DOM: makeDOMDriver('#app')
5};
样板应用程序附带了DOM驱动程序，但也有许多其他您可以安装的程序.你也可以自己滚。
🚴🏼Cycle.js与其他框架在哲学上是如此不同，在本质上是如此深刻，以至于没有人一下子就把它包围起来。我们将在时间上更详细地深入探讨这些主题和其他许多主题，但这应该足以让您入门。