前言
RxSwift的魅力想必用过的人都有心得体会，简直就是从入门到想放弃，从想放弃到爱不释手的过程。但是RxSwift的前世今生并不是本文想写的内容，而是其中很常用又很重要的一个部分UITableView。不管用什么语言开发移动端App，新人们基本都会被告知，掌握了TableView和CollectionView，就学会了这门语言的80%，可想而知其重要性。
RxSwift的Git社区，其中一个库RxDataSources是本文的重头戏。UITableViewDataSource和UITableViewDelegate是UITableView两个重要的代理，RxDataSources用RxSwift封装了tableView(:cellForRowAt)和tableView(:didSelectRowAt)方法，后面会细细道来。
正文
本文将从一个最最简单的TableView例子讲起，并将之用RxSwift实现，然后一步步将其功能完善。当然灵感都是来自于RxSwift官方Demo，demo中有简单的RxTableView(注：基于RxSwift的UITableView，笔者称之为RxTableView)例子。
第一个VC：Simplest UITableView
UITableViewDataSource和UITableViewDelegate是UITableView的核心，简单说明下几个最重要的代理方法：
// MARK: - UITableViewDataSource
override func numberOfSections(in tableView: UITableView) -> Int {
return 1 // Section的数量
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return items.count // Section中Row的数量
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) // TableViewCell绘制
cell.textLabel?.text = items[indexPath.row]
return cell
}
// MARK: - UITableViewDelegate
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true) // TableViewCell点击事件
let viewController = RxTableViewController()
viewController.type = RxTableViewType(rawValue: indexPath.row)!
self.navigationController?.pushViewController(viewController, animated: true)
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 40 // TableViewCell高度
}
第二个VC：Simplest RXTableView
RxDataSources库把UITableViewDataSource和UITableViewDelegate的代理封装成了响应式编程的风格，在代码量上少了很多，当然也更难理解：
// 1.将数据绑定到TableView上
let items = Observable.just((0..<30).map({ "\($0)"}))
items.bind(to: tableView.rx.items(cellIdentifier: "Cell", cellType: UITableViewCell.self)) { (row, element, cell) in
cell.textLabel?.text = "row \(element)"
}.disposed(by: disposeBag)
// 2.TableViewCell点击事件响应
tableView.rx.modelSelected(String.self).subscribe(onNext: { (item) in
print(item) // "1"
}).disposed(by: disposeBag)
几行代码就可以实现cell的绘制和点击处理，被观察者Obserable有一个bind(to:)方法，将自己与订阅者Observer绑定，在Obserable发送事件的时候,Observer会同步更新，两者的数据类型必须保持一致。例如Obserable<String>类型的变量str，调用bind(to:)方法将其绑定到一个UILabel类型的变量label的text属性上（同为String类型），那么str变化的同时， label.text的值跟str保持一致。
var str = "str"
let label = UILabel(frame: .zero)
Observable.of(str).bind(to: label.rx.text).disposed(by: disposeBag) // label.text = "str"
str = "changed" // label.text = "changed"
实质上，bind(to:)是对subsribe做了一层封装，subscribe(onNext:)同样可以实现上述功能：
Observable.of(str).subscribe(onNext: { label.text = $0 }).disposed(by: disposeBag)
明显，bind(to:)比subscribe(onNext:)更加"响应式"。
第三个VC：RXTableView of Sections
用items(cellIdentifier:cellType:)方法可以满足单个Section的场景，它还有另外一个方法items(dataSource:)，则可以满足多个Section的场景，当然步骤也更加复杂。
// 自定义Model，遵循SectionModelType
struct SectionModel<HeaderType, ItemType>: SectionModelType {
var header: HeaderType
var items: [ItemType]
init(header: HeaderType, items: [ItemType]) {
self.header = header
self.items = items
}
init(original: SectionModel<HeaderType, ItemType>, items: [ItemType]) {
self.header = original.header
self.items = items
}
}
// 1.创建DataSource
let dataSource = RxTableViewSectionedReloadDataSource<SectionModel<String,Int>>(configureCell: { (section, tableView, indexPath, element) in
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")!
cell.textLabel?.text = "row \(element)"
return cell
})
// 2.设置HeaderTitle（可选）
dataSource.titleForHeaderInSection = { (dataSource, sectionIndex) -> String? in
return dataSource[sectionIndex].header
}
// 3.将数据绑定到TableView上
let items = [SectionModel(header: "section 1", items: [1, 2, 3]), SectionModel(header: "section 2", items: [1, 2, 3])]
Observable.just(items).bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)
// 4.TableViewCell点击事件响应
tableView.rx.itemSelected.map {
return ($0, items[$0.section].header, dataSource[$0])
}.subscribe(onNext: { indexPath, header, item in
print("\(header), row \(item)") // "section 1, row 1"
}).disposed(by: disposeBag)
相对于上一个VC的直接绑定，这里需要额外定义Model，创建DataSource，并调用tableView.rx.items(dataSource:)方法来进行绑定，这些额外的步骤都是为了提高可定制化的程度。这里Cell的点击事件响应已经由modelSelected()方法换成了itemSelected()方法，差别就是modelSelected()方法会直接返回选中的model，而不会返回选中model的indexPath。
RxDataSources的优劣
RxDataSources库已经提供了强大的功能来满足RxSwift开发者们实现响应式TableView的迫切愿望，但是也有不完美的地方，笔者将结合自身经历列出优势和不足：
优势
- 与RxSwift结合，让代码更加“响应式”。即使用复写delegate方法来实现UITableViewDataSource和UITableViewDelegate也是完全OK的，只是面向对象编程与响应式编程的代码糅合在一起，显示特别奇怪。一切皆“响应”，没有什么是响应式编程无法实现的，特别不能用面向对象的思维去思考，会越走越远。
- 类似闭包语法的风格，让代码更加简洁。以前笔者喜欢用delegate，觉得逻辑很简单直观，但是久了就会发现调试起来，页面上下滚动太频繁，对象的创建和代理方法调用基本不在同一页面。RxDataSources这种“闭包式”的语法，让代码变得更加简洁，更易调试。
- 其他优点应该还有很多。。。。。
不足
尚未完全Rx化，不得不复写代理方法。笔者用了一段时间这个库，目前发现有两点是无法做到响应式实现
- 通常在调用tableView(:didSelectRowAt:)方法后，会调用deselectRow(at:animated:) 函数来取消选中，但是目前没有发现调用modelSelected()或itemSelected()方法后有什么方法可以直接取消选中，而不是在subscribe(onNext:)方法中用面向对象的逻辑实现；
- tableView(: heightForRowAt: )方法是用来设置高度的，RxTableViewSectionedReloadDataSource的配置项中目前没有发现有什么方法可以设置Cell高度。
以上都是个人观点，假如是因为笔者才疏学浅才没有发现的话，还望指正。
总结
RxTableView的入门讲解就告一段落，后续会出一篇进阶篇，深入分析数据和视图的绑定机制，并实现一（数据）对多（视图）的绑定，一（数据）对一（多视图切换）的绑定，也是自己在实际项目中遇到的坑，拿出来跟各位共同探讨。
Demo地址：https://github.com/MrSuperJJ/RxTableViewDemo
