ReactiveCocoa入门-part2

时间  2019-11-13
标签 reactivecocoa 入门 part2 栏目 React 繁體版
原文   原文链接

ReactiveCocoa是一个框架，它能让你在iOS应用中使用函数响应式编程（FRP）技术。在本系列教程的第一部分中，你学到了如何将标准的动做与事件处理逻辑替换为发送事件流的信号。你还学到了如何转换、分割和聚合这些信号。html

 

在本系列教程的第二部分，你将会学到一些ReactiveCocoa的高级功能，包括：react

  • 另外两个事件类型：error 和 completed
  • 节流
  • 线程
  • 延伸
  • 其余

 

是时候深刻研究一下了。ios

 

Twitter Instant

在本教程中你将要开发的应用叫Twitter Instant（基于Google Instant的概念），这个应用能搜索Twitter上的内容，并根据输入实时更新搜索结果。git

 

这个应用的初始工程包括一些基本的UI和必须的代码。和第一部分同样，你须要使用CocoaPods来获取ReactiveCocoa框架，并集成到项目中。github

 

验证搜索文本的有效性

首先要作的就是验证搜索文本，来确保文本长度大于2个字符。若是你完成了本系列教程的第一部分，那这个应该很熟悉。编程

 

在RWSearchFormViewController.m中的viewDidLoad 下面添加下面的方法：json

- (BOOL)isValidSearchText:(NSString *)text {
    return text.length > 2;
}

这个方法就只是确保要搜索的字符串长度大于2个字符。这个逻辑很简单，你可能会问“为何要在工程文件中写这么一个单独的方法呢？”。api

 目前验证输入有效性的逻辑的确很简单，但若是未来逻辑须要变得更复杂呢？若是是像上面的例子中那样，那你就只须要修改一个地方。并且这样写能让你代码的可读性更高，代码自己就说明了你为何要检查字符串的长度。数组

把下面的代码加到viewDidLoad的最下面 ：安全

[[self.searchText.rac_textSignal 
    map:^id(NSString *text) {
        return [self isValidSearchText:text] ? 
            [UIColor whiteColor] : [UIColor yellowColor];
    }] 
    subscribeNext:^(UIColor *color) { 
        self.searchText.backgroundColor = color; 
}];​

上面的代码作了什么呢？

  • 获取search text field 的text signal
  • 将其转换为颜色来标示输入是否有效
  • 而后在subscribeNext：block里将颜色应用到search text field的backgroundColor属性

当text field中的文字每次发生变化时，rac_textSignal都会发送一个next 事件，事件包含当前text field中的文字。map这一步将文本值转换成了颜色值，因此subscribeNext：这一步会拿到这个颜色值，并应用在text field的背景色上。

 

避免循环引用

ReactiveCocoa已经在幕后作了不少事情，这也就意味着你并不须要太多关注signal的内存管理。可是还有一个很重要的内存相关问题你须要注意。

 看一下你刚才添加的代码：

[[self.searchText.rac_textSignal 
    map:^id(NSString *text) { 
        return [self isValidSearchText:text] ? 
            [UIColor whiteColor] : [UIColor yellowColor]; 
    }] 
    subscribeNext:^(UIColor *color) { 
        self.searchText.backgroundColor = color; 
    }];​

subscribeNext：block中使用了self来获取text field的引用。block会捕获并持有其做用域内的值。所以，若是self和这个信号之间存在一个强引用的话，就会形成循环引用。循环引用是否会形成问题，取决于self对象的生命周期。若是self的生命周期是整个应用运行时，好比说本例，那也就无伤大雅。可是在更复杂一些的应用中，就不是这么回事了。

 为了不潜在的循环引用，Apple的文档Working With Blocks中建议获取一个self的弱引用。用本例来讲就是下面这样的：

__weak RWSearchFormViewController *bself = self; // Capture the weak reference 
 
[[self.searchText.rac_textSignal 
    map:^id(NSString *text) { 
        return [self isValidSearchText:text] ? 
            [UIColor whiteColor] : [UIColor yellowColor]; 
    }] 
    subscribeNext:^(UIColor *color) { 
        bself.searchText.backgroundColor = color; 
    }];​

在上面的代码中，__weak修饰符使bself成为了self的一个弱引用。注意如今subscribeNext：block中使用bself变量。不过这种写法看起来不是那么优雅。

ReactiveCocoa框架包含了一个语法糖来替换上面的代码。在文件顶部添加下面的代码：

#import "RACEXTScope.h"​

而后把代码替换成下面的：

@weakify(self) 
[[self.searchText.rac_textSignal 
    map:^id(NSString *text) { 
        return [self isValidSearchText:text] ? 
            [UIColor whiteColor] : [UIColor yellowColor]; 
    }] 
    subscribeNext:^(UIColor *color) { 
        @strongify(self) 
        self.searchText.backgroundColor = color; 
    }];​

上面的@weakify 和 @strongify 语句是在Extended Objective-C库中定义的宏，也被包括在ReactiveCocoa中。@weakify宏让你建立一个弱引用的影子对象（若是你须要多个弱引用，你能够传入多个变量），@strongify让你建立一个对以前传入@weakify对象的强引用。

 

就在引用的下面，添加下面的枚举和常量：

typedef NS_ENUM(NSInteger, RWTwitterInstantError) {
    RWTwitterInstantErrorAccessDenied, 
    RWTwitterInstantErrorNoTwitterAccounts, 
    RWTwitterInstantErrorInvalidResponse 
}; 
 
static NSString * const RWTwitterInstantDomain = @"TwitterInstant";​

一下子你就要用到它们来标示错误。

 仍是在这个文件中，在已有属性声明的下面，添加下面的代码：

@property (strong, nonatomic) ACAccountStore *accountStore; 
@property (strong, nonatomic) ACAccountType *twitterAccountType;​

ACAccountsStore类能让你访问你的设备能链接到的多个社交媒体帐号，ACAccountType类则表明帐户的类型。

 仍是在这个文件中，把下面的代码添加到viewDidLoad的最下面：

self.accountStore = [[ACAccountStore alloc] init]; 
self.twitterAccountType = [self.accountStore 
    accountTypeWithAccountTypeIdentifier:ACAccountTypeIdentifierTwitter];

上面的代码建立了一个account store和Twitter帐户标识符。

 当应用获取访问社交媒体帐号的权限时，用户会看见一个弹框。这是一个异步操做，所以把这封装进一个signal是很好的选择。

 仍是在这个文件中，添加下面的代码：

- (RACSignal *)requestAccessToTwitterSignal {
    // 1 - define an error 
    NSError *accessError = [NSError errorWithDomain:RWTwitterInstantDomain 
                                               code:RWTwitterInstantErrorAccessDenied 
                                           userInfo:nil];
                                       
    // 2 - create the signal 
    @weakify(self) 
    return [RACSignal createSignal:^RACDisposable *(id subscriber) { 
        // 3 - request access to twitter 
        @strongify(self) 
        [self.accountStore requestAccessToAccountsWithType:self.twitterAccountType 
               options:nil 
            completion:^(BOOL granted, NSError *error) {
            // 4 - handle the response 
            if (!granted) { 
               [subscriber sendError:accessError]; 
            } else { 
                [subscriber sendNext:nil]; 
                [subscriber sendCompleted]; 
            } 
        }]; 
    return nil; 
    }]; 
}​

这个方法作了下面几件事：

  1. 定义了一个error，当用户拒绝访问时发送。
  2. 和第一部分同样，类方法createSignal返回一个RACSignal实例。
  3. 经过account store请求访问Twitter。此时用户会看到一个弹框来询问是否容许访问Twitter帐户。
  4. 在用户容许或拒绝访问以后，会发送signal事件。若是用户容许访问，会发送一个next事件，紧跟着再发送一个completed事件。若是用户拒绝访问，会发送一个error事件。

在signal的生命周期中，它可能不发送事件，发送一个或多个next事件，在这以后还能发送一个completed事件或一个error事件。

 

最后，为了使用这个signal，把下面的代码添加到viewDidLoad的最下面：

[[self requestAccessToTwitterSignal] 
    subscribeNext:^(id x) { 
        NSLog(@"Access granted"); 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];​

 

连接signal

一旦用户容许访问Twitter帐号（但愿如此），应用就应该一直监测search text filed的变化，以便搜索Twitter的内容。

应用应该等待获取访问Twitter权限的signal发送completed事件，而后再订阅text field的signal。按顺序连接不一样的signal是一个常见的问题，可是ReactiveCocoa处理的很好。

 把viewDidLoad中当前管道的代码替换成下面的：

[[[self requestAccessToTwitterSignal] 
    then:^RACSignal *{ 
        @strongify(self) 
        return self.searchText.rac_textSignal; 
    }] 
    subscribeNext:^(id x) { 
        NSLog(@"%@", x); 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];

then方法会等待completed事件的发送，而后再订阅由then block返回的signal。这样就高效地把控制权从一个signal传递给下一个。

 

接下来，在管道中添加一个filter操做来过滤掉无效的输入。在本例里就是长度不够3个字符的字符串：

[[[[self requestAccessToTwitterSignal] 
    then:^RACSignal *{ 
        @strongify(self) 
        return self.searchText.rac_textSignal; 
    }] 
    filter:^BOOL(NSString *text) { 
        @strongify(self) 
        return [self isValidSearchText:text]; 
    }] 
    subscribeNext:^(id x) { 
        NSLog(@"%@", x); 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];​

如今用图形来表示管道，就和下图相似：

管道从requestAccessToTwitterSignal 开始，而后转换为rac_textSignal。同时，next事件经过一个filter，最终到达订阅者的block。你还能看到第一步发送的error事件也是由subscribeNext:error：block来处理的。

 

搜索Twitter的内容

你可使用Social Framework来获取Twitter搜索API，但的确如你所料，Social Framework不是响应式的。那么下一步就是把所需的API调用封装进signal中。你如今应该熟悉这个过程了。

 在RWSearchFormViewController.m中，添加下面的方法：

- (SLRequest *)requestforTwitterSearchWithText:(NSString *)text { 
NSURL *url = [NSURL URLWithString:@"https://api.twitter.com/1.1/search/tweets.json"]; 
NSDictionary *params = @{@"q" : text}; 
SLRequest *request = [SLRequest requestForServiceType:SLServiceTypeTwitter 
                                        requestMethod:SLRequestMethodGET 
                                                  URL:url 
                                           parameters:params]; 
return request; 
}​

 方法建立了一个请求，请求经过v1.1 REST API来搜索Twitter。上面的代码使用q这个搜索参数来搜索Twitter中包含有给定字符串的微博。你能够在Twitter API 文档中来阅读更多关于搜索API和其余传入参数的信息。

 

 下一步是基于这个请求建立signal。在同一个文件中，添加下面的方法：

- (RACSignal *)signalForSearchWithText:(NSString *)text { 
    // 1 - define the errors 
    NSError *noAccountsError = [NSError errorWithDomain:RWTwitterInstantDomain 
                                                   code:RWTwitterInstantErrorNoTwitterAccounts 
                                               userInfo:nil]; 
    NSError *invalidResponseError = [NSError errorWithDomain:RWTwitterInstantDomain 
                                                        code:RWTwitterInstantErrorInvalidResponse 
                                                        userInfo:nil]; 
                                                        
    // 2 - create the signal block 
    @weakify(self) 
    return [RACSignal createSignal:^RACDisposable *(id subscriber) { 
        @strongify(self); 
        
        // 3 - create the request 
        SLRequest *request = [self requestforTwitterSearchWithText:text]; 
        
        // 4 - supply a twitter account 
        NSArray *twitterAccounts = [self.accountStore accountsWithAccountType:self.twitterAccountType];         if (twitterAccounts.count == 0) { 
            [subscriber sendError:noAccountsError]; 
        } else { 
            [request setAccount:[twitterAccounts lastObject]]; 
            
        // 5 - perform the request 
        [request performRequestWithHandler: ^(NSData *responseData, 
                NSHTTPURLResponse *urlResponse, NSError *error) { 
            if (urlResponse.statusCode == 200) { 
            
                // 6 - on success, parse the response 
                NSDictionary *timelineData = [NSJSONSerialization JSONObjectWithData:responseData 
                                                options:NSJSONReadingAllowFragments 
                                                  error:nil]; 
                [subscriber sendNext:timelineData]; 
                [subscriber sendCompleted]; 
            } else { 
                // 7 - send an error on failure 
                [subscriber sendError:invalidResponseError]; 
            } 
        }]; 
    } 
    return nil; 
    }];
}

分别讲一下每一个步骤：

  1. 首先须要定义2个不一样的错误，一个表示用户尚未添加任何Twitter帐号，另外一个表示在请求过程当中发生了错误。
  2. 和以前的同样，建立一个signal。
  3. 用你以前写的方法，给须要搜索的文本建立一个请求。
  4. 查询account store来找到可用的Twitter帐号。若是没有帐号的话，发送一个error事件。
  5. 执行请求。
  6. 在请求成功的事件里（http响应码200），发送一个next事件，返回解析好的JSON数据，而后再发送一个completed事件。
  7. 在请求失败的事件里，发送一个error事件。

 

如今来使用这个新的signal！

 

在本教程的第一部分，你学过了如何使用flattenMap来把每一个next事件映射到一个新的signal。如今又要用到了。在viewDidLoad的末尾更新你的管道，添加flattenMap这一步：

[[[[[self requestAccessToTwitterSignal] 
    then:^RACSignal *{ 
        @strongify(self) 
        return self.searchText.rac_textSignal; 
    }] 
    filter:^BOOL(NSString *text) { 
        @strongify(self) 
        return [self isValidSearchText:text]; 
    }] 
    flattenMap:^RACStream *(NSString *text) { 
        @strongify(self) 
        return [self signalForSearchWithText:text]; 
    }] 
    subscribeNext:^(id x) { 
        NSLog(@"%@", x); 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];

构建运行，在search text field中输入一些文字。当文本长度超过3个字符时，你应该就能在控制台看到搜索Twitter的结果了。

下面是一段你将会看到的数据：

2014-01-05 07:42:27.697 TwitterInstant[40308:5403] { 
"search_metadata" = { 
    "completed_in" = "0.019"; 
    count = 15; 
    "max_id" = 419735546840117248; 
    "max_id_str" = 419735546840117248; 
    "next_results" = "?max_id=419734921599787007&q=asd&include_entities=1"; 
    query = asd; 
    "refresh_url" = "?since_id=419735546840117248&q=asd&include_entities=1"; 
    "since_id" = 0; 
    "since_id_str" = 0; 
}; 
statuses = ( 
    { 
        contributors = ""; 
        coordinates = ""; 
        "created_at" = "Sun Jan 05 07:42:07 +0000 2014"; 
        entities = { 
            hashtags = ...​

 

线程

我相信你已经想把搜索Twitter返回的JSON值和UI链接起来了，可是在这以前还有最后一个须要作的事情。如今须要稍微作一些探索，来看一下这究竟是什么！

在subscribeNext:error：中以下图所示的地方加一个断点：

 

从新运行应用。若是须要的话，再次输入Twitter登陆信息。在search field中输入一些内容。当在断点中止时，你应该能看到和下图相似的东西：

 

注意断点停在的代码并无在主线程，也就是截图中的Thread 1中执行。请记住你只能在主线程中更新UI。所以你须要切换线程来在UI中展现微博的列表。

 这展现了ReactiveCocoa框架很重要的一点。上面显示的操做会在signal最开始发送事件的线程中执行。尝试在管道的其余步骤添加断点，你可能会惊奇的发现它们也是在不一样线程上执行的。

 因此接下来你要怎么更新UI呢？一般的作法是使用操做队列（参见教程如何使用 NSOperations 和 NSOperationQueues）。可是ReactiveCocoa有更简单的解决办法。

像下面的代码同样，在flattenMap：以后添加一个deliverOn：操做：

[[[[[[self requestAccessToTwitterSignal] 
    then:^RACSignal *{ 
        @strongify(self) 
        return self.searchText.rac_textSignal; 
    }] 
    filter:^BOOL(NSString *text) { 
        @strongify(self) 
        return [self isValidSearchText:text]; 
    }] 
    flattenMap:^RACStream *(NSString *text) { 
        @strongify(self) 
        return [self signalForSearchWithText:text]; 
    }] 
    deliverOn:[RACScheduler mainThreadScheduler]] 
    subscribeNext:^(id x) { 
        NSLog(@"%@", x); 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];

如今从新运行，输入一些内容，停在断点。你应该能看到subscribeNext:error：block中的代码如今实在主线程执行了。

 

更新UI

若是你打开RWSearchResultsViewController.h 就会发现已经有一个displayTweets：方法了，它会让右边的view controller根据提供的微博数组来展现内容。实现很是简单，就是一个标准的UITableView数据源。displayTweets:方法须要的惟一一个参数就是包含RWTweet实例的数组。RWTweet模型已经包含在初始工程里了。

 subscibeNext:error：里收到的数据目前是在signalForSearchWithText：里由返回的JSON值转换获得的一个NSDictionary。因此你怎么肯定字典里的内容呢？

 看一下Twitter的API文档，那里有返回值的样例。NSDictionary和这个结构对应，因此你能找到一个叫“statuses”的键，它对应的值是一个包含微博的NSArray，每一个条文也是NSDictionary实例。

 RWTweet已经有一个类方法tweetWithStatus：，方法从NSDictionary中取得须要的数据。因此你须要的作的就是写一个for循环，遍历数组，为每条微博建立一个RWTweet实例。

 但咱们此次不这么作。还有更好的方法。

 这篇文章是关于ReactiveCocoa和函数式编程。若是用函数式API来实现把数据从一个格式转换为另外一个会优雅不少。你将会用到LinqToObjectiveC来完成这个任务。

 

NSArray+LinqExtensions.h头文件是LinqToObjectiveC里的，它为NSArray添加了许多方法，能让你用流式API来转换、排序、分组和过滤其中的数据。如今就来用一下

 把viewDidLoad中的代码更新成下面这样的：

[[[[[[self requestAccessToTwitterSignal] 
    then:^RACSignal *{ 
        @strongify(self) 
        return self.searchText.rac_textSignal; 
    }] 
    filter:^BOOL(NSString *text) { 
        @strongify(self) 
        return [self isValidSearchText:text]; 
    }] 
    flattenMap:^RACStream *(NSString *text) { 
        @strongify(self) 
        return [self signalForSearchWithText:text]; 
    }] 
    deliverOn:[RACScheduler mainThreadScheduler]] 
    subscribeNext:^(NSDictionary *jsonSearchResult) { 
        NSArray *statuses = jsonSearchResult[@"statuses"]; 
        NSArray *tweets = [statuses linq_select:^id(id tweet) { 
            return [RWTweet tweetWithStatus:tweet]; 
        }]; 
        [self.resultsViewController displayTweets:tweets]; 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];

在上面的代码中，subscribeNext：block首先获取包含微博的数组。而后linq_select方法对数组中的每一个元素执行提供的block，来把NSDictionary的数组转换成RWTweet的数组。

 

异步加载图片

你可能注意到了每条微博的左侧有一段空隙，这是用来显示Twitter用户头像的。

 RWTweet类有一个属性profileImageUrl来存放头像的URL。为了让table view能流畅地滚动，你须要让用URL获取图像的代码不在主线程中执行。你可使用Grand Central Dispatch或者NSOperationQueue来实现。可是为何不用ReactiveCocoa呢？

 打开RWSearchResultsViewController.m，添加下面的方法：

-(RACSignal *)signalForLoadingImage:(NSString *)imageUrl { 
    RACScheduler *scheduler = [RACScheduler 
        schedulerWithPriority:RACSchedulerPriorityBackground]; 
        
    return [[RACSignal createSignal:^RACDisposable *(id subscriber) { 
        NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]]; 
        UIImage *image = [UIImage imageWithData:data]; 
        [subscriber sendNext:image]; 
        [subscriber sendCompleted]; 
        return nil; 
    }] subscribeOn:scheduler]; 
}

面的方法首先获取一个后台scheduler，来让signal不在主线程执行。而后，建立一个signal来下载图片数据，当有订阅者时建立一个UIImage。最后是subscribeOn：来确保signal在指定的scheduler上执行。

如今仍是在这个文件中，在tableView:cellForRowAtIndex：方法的return语句以前添加下面的代码：

cell.twitterAvatarView.image = nil; 
 
[[[self signalForLoadingImage:tweet.profileImageUrl] 
    deliverOn:[RACScheduler mainThreadScheduler]] 
    subscribeNext:^(UIImage *image) { 
        cell.twitterAvatarView.image = image; 
    }];

由于cell是重用的，可能有脏数据，因此上面的代码首先重置图片。而后建立signal来获取图片数据。你以前也遇到过deliverOn：这一步，它会把next事件发送到主线程，这样subscribeNext：block就能安全执行了。

 

节流

你可能注意到了，每次输入一个字，搜索Twitter都会立刻执行。若是你输入很快（或者只是一直按着删除键），这可能会形成应用在一秒内执行好几回搜索。这很不理想，缘由以下：首先，屡次调用Twitter搜索API，但大部分返回结果都没有用。其次，不停地更新界面会让用户分心。

 更好的解决方法是，当搜索文本在短期内，好比说500毫秒，再也不变化时，再执行搜索。

 你可能也猜到了，用ReactiveCocoa来处理这个问题很是简单！

 打开RWSearchFormViewController.m，在viewDidLoad中，在filter以后添加一个throttle步骤：

[[[[[[[self requestAccessToTwitterSignal] 
    then:^RACSignal *{ 
        @strongify(self) 
        return self.searchText.rac_textSignal; 
    }] 
    filter:^BOOL(NSString *text) { 
        @strongify(self) 
        return [self isValidSearchText:text]; 
    }] 
    throttle:0.5] 
    flattenMap:^RACStream *(NSString *text) { 
        @strongify(self) 
        return [self signalForSearchWithText:text]; 
    }] 
    deliverOn:[RACScheduler mainThreadScheduler]] 
    subscribeNext:^(NSDictionary *jsonSearchResult) { 
        NSArray *statuses = jsonSearchResult[@"statuses"]; 
        NSArray *tweets = [statuses linq_select:^id(id tweet) { 
            return [RWTweet tweetWithStatus:tweet]; 
        }]; 
        [self.resultsViewController displayTweets:tweets]; 
    } error:^(NSError *error) { 
        NSLog(@"An error occurred: %@", error); 
    }];

只有当，前一个next事件在指定的时间段内没有被接收到后，throttle操做才会发送next事件。就是这么简单。

 构建运行，确认一下当中止输入超过500毫秒后，才会开始搜索。感受比以前好一些吧？你的用户也会这么想的。

PS：本文翻译自RayWenderlich  ReactiveCocoa Tutorial – The Definitive Introduction: Part 2/2

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程