ReactiveCocoa框架菜鸟入门（五）——信号的FlattenMap与Map

文章背景

本文是在阅读《ReactiveCocoa入门教程：第一部分》一文后，提出的一些补充。主要是比较深入的研究了信号（Signal）的FlattenMap与Map与Map方法。

读者应该至少了解信号的概念，以及信号的基本操作。

问题提出

有时候，我们需要把一个异步的API用信号的方式来表示。比如，点击登录按钮后异步的访问服务器，当获取到数据的时候再调用订阅者的处理方法。一个可能会出现的代码大概是这样：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (RACSignal *)signInSignal {
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [RACSignal createSignal:^RACDisposable *(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> subscriber){
   [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.signInService</span> 
     signInWithUsername:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.usernameTextField</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span>
               password:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.passwordTextField</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span>
               complete:^(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span> success){
                    [subscriber sendNext:@(success)];
                    [subscriber sendCompleted];
     }];
   <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>;
}];
}

[[[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.signInButton</span>
   rac_signalForControlEvents:UIControlEventTouchUpInside]
   map:^<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> x){
     <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> signInSignal];
   }]
   subscribeNext:^(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> x){
     <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSLog</span>(@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Sign in result: %@"</span>, x);
   }];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

这样的代码并不能正常运行，原文给出的解决方案是把map方法换成flattenMap方法，但是却没有给出解释。在此专栏的上一篇文章，我们已经研究过了flattenMap的工作原理，并且明确了一点：map方法是基于flattenMap方法实现的。

再探FlattenMap与Map

在了解这两个方法的工作原理之前，我们不妨梳理一下思路。对于一个信号流（由若干个信号前后拼接而成）中的每一个信号而言，我们最关心它能传递出什么数据，就像我们只关心水龙头里面流出的是水还是石油一样。至于流入的数据，一定是上一个信号的流出数据。

然而，在之前的讨论中我们已经清楚，信号能流出什么样的数据，是在创建这个信号的决定的。也就是说，订阅者拿到的数据，取决于在创建信号的时候，我们制定的sendNext方法的参数。与现实生活不同的是，我们可以在水龙头之间添加过滤网来实现类似的功能。

在《ReactiveCocoa框架菜鸟入门——信号（Signal）详解》一文中，我们已经详细的查看了bind方法和flattenMap方法的代码和文档。

flattenMap方法，实际上是根据前一个信号传递进来的参数重新建立了一个信号，这个参数，可能会在创建信号的时候用到，也有可能根本用不到。比如在之前的例子中，我们其实调用了自定义的方法来创建信号。

之前提到过，我们关注一个信号能传递什么数据出来，那么调用了flattenMap方法创建的信号，会传出什么样的值呢？

答案是不知道！！！

因为flattenMap方法并不关心生成的信号会传递什么值，它只负责

根据前一个信号的参数创建一个新的信号！

而至于这个信号会传递什么值，之前也提到过，是在创建信号的时候指定的。比如本文所举的例子中，我们自定义的信号会传递这样的值

<code class="hljs ini has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 102, 102);">[subscriber sendNext:@(success)]</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

理解了这一点之后，map方法就简单了。先看一下map方法的定义：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (instancetype)map:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> (^)(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> value))block {
    NSCParameterAssert(block != <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>);

    Class class = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.class</span>;

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> flattenMap:^(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> value) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [class <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>:block(value)];
    }] setNameWithFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"[%@] -map:"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.name</span>];
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

这里的[class return:block(value)]方法实现了flattenMap方法的功能，他返回了一个信号。return：方法的代码实现有点长，有兴趣的读者可以自行查阅，这里就不具体分析，总结来说就是，这个信号传递的值讲是block(value)。

flattenMap方法和map方法都有一个带参数value的block作为这个方法的参数。不同的是，flattenMap方法通过调用block（value）来创建一个新的方法。它可以灵活的定义新创建的信号。而map方法，将会创建一个和原来一模一样的信号，只不过新的信号传递的值变为了block（value）。

总结一下，个人对map的理解是“变换”。map方法，根据原信号创建了一个新的信号，并且变换了信号的输出值。这两个信号具有明显的先后顺序关系。而flattenMap方法，直接生成了一个新的信号，这两个信号并没有先后顺序关系，属于同层次的平行关系。这也许就是为什么会被命名为flattenMap吧。

实践检验

回头看一看此前的例子之所以用map方法不行的原因在于，map方法创建的信号，接收了前一个信号传递的值，传出的值是[self signInSignal]的执行结果，即任然是一个信号，但是我们并不需要这个信号，我们需要的是这个信号的传出值。

使用flattenMap方法就可行的原因在于，flattenMap方法生成了一个新的信号，也就是我们调用[self signInSignal]的执行结果。这个信号的传出的值，在信号的创建过程中已经被定义。所以可以正常工作。

吐槽一句

非常感谢最初翻译出ReactiveCocoa教程的大牛，给了我们快速入门的机会。但是能力越大，责任也越大，简单一句flattenMap可以处理信号中的信号，是非常不负责任的，可能会影响无数的学习者。甚至原作者当时也没能完全理解flattenMap的工作原理以及和map方法之间的关系。我想，严谨、求真知，是对任何一门科学的基本尊重。包括软件工程。