Diffable DataSource

苹果在WWDC2019的session中公开了iOS13一些新的系统API, 其中对于非常稳定的UITableView和UICollectionView这2个控件,各自新增了一套Diffable DataSource的API。

本文从why, what, how的角度出发,并结合一个优秀的第三方库IGListKit来分析下如何实现一套Diffable DataSource。

我们先来看第一个问题, 为什么需要一个Diffable DataSource?

要回答这个问题,我们先来看业务上一个最常见的场景,例如用户手动刷新了下聊天列表,可能因为各种原因列表数据源发生了一些增删改的变化,此时我们该如何对应地刷新整个列表呢?

一般有两类方法:

  • 粗暴方法

    [self.tableView reloadData];
    
  • 精巧方法

    [self.tableView beginUpdates];
    [self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
    [self.models safeRemoveObjectAtIndex:indexPath.row];
    [self.tableView endUpdates];
    

粗暴的方法最简单,几乎不可能出现数据源不一致导致的异常等情况,但在数据量很大的情况下有一些性能的瓶颈,尤其在低端机型上。

精巧的方法,需要手动去计算数据源的变化,并使用对应的API去更新,如下:

- (void)insertRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

- (void)deleteRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

- (void)moveRowAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath;

因为是手动diff数据源并调用相关API,如果计算不准确就容易引起NSInternalInconsistencyException。

在苹果出现Diffable data source API之前,就有很多地方库实现了通过Diff数据源来实现既傻瓜又高效的列表刷新方式,比如IGListKit和DeepDiff,我们无法看到苹果Diffable DataSource的源码,但可以通过回顾下第三方库IGList的源码来大概看下,是能如何实现一个基于高效Diff算法的列表刷新的:

首先要实现一个Diffable Datasource,需要数据源能够告诉我们,他们是否"一样"。

在IGListKit中,需要实现IGListDiffable协议

@protocol IGListDiffable
- (nonnull id<NSObject>)diffIdentifier;
- (BOOL)isEqualToDiffableObject:(nullable id<IGListDiffable>)object;
@end

其中第一个接口来标示是否是同一个数据源,而第二个接口来标示它是否自身需要update

在判断数据之间是否”一样“之后,需要一个高效的Diff算法来计算出旧数据源更新到新数据源所需的"最短编辑距离",并调用相应Api完成列表的更新。

IGListKit diff函数实现的是Paul Heckel的算法,它的时间复杂度为O(M+N)(M和N为新旧数据源的长度)。

IGlistKit diff函数的入参主要是新旧两个数据源数组:

NSArray<id<IGListDiffable>> *oldArray,
NSArray<id<IGListDiffable>> *newArray,

其中新旧数据源中的每一个数据都有一个对应的IGListEntry对象来表示和参与计算:

/// Used to track data stats while diffing.
struct IGListEntry {
    /// The number of times the data occurs in the old array
    NSInteger oldCounter = 0;
    /// The number of times the data occurs in the new array
    NSInteger newCounter = 0;
    /// The indexes of the data in the old array
    stack<NSInteger> oldIndexes;
    /// Flag marking if the data has been updated between arrays by checking the isEqual: method
    BOOL updated = NO;
};

IGListEntry的结构和作用见上面代码中的注释,还是非常清晰的。

我们再来看整个diff算法的核心流程:

  1. 为newArray里的每个数据创建一个IGListEntry,将其newCounter计数+1,并push一个NSNotFound到entry的oldIndexes占位

  2. 为oldArray里的每个数据创建一个IGlistEntry(如果步骤1已创建的话则是获取),将其oldCounter计数+1, 并push index到oldIndexes中。

    这里需要注意的是,oldArray是根据index倒序遍历的,这样是为了对应oldIndexes使用的stack

  3. 通过遍历newArray对应的Entry List处理同时在新旧数据里出现的数据,当从oldIndexes pop出第一个元素不为NSNotFound,则代表这个数据在新旧数据源中都存在,并通过标记这个数据是否更新

  4. 遍历所有老的数据源,如果他没有出现在新数据源中,则标记为delete,并加入到delete容器中

  5. 遍历所有新的数据源,

    如果他没有出现在老的数据源中,则标记为insert,并加入到insert容器中

    否则将其加入到update容器中,并通过比较delete和insert时记录的indexOffset来判断它是一个move还是update

从上面可以看出,这个Diff算法的空间和时间复杂度都是O(M+N),可以很好处理长列表的case(传统LCS算法的复杂度需要O(N^2)!),且封装了最后patch操作中offset相关的很多计算,杜绝了自己手动进行更新时极容易出的index计算错误导致的NSInternalInconsistencyException,只需要数据层实现IGListDiffable协议,就可以实现傻瓜又高效的列表刷新。

这也符合所有框架设计的哲学:

将复杂易错的逻辑抽取封装在久经考验的代码中,让使用者只需要控制少量不容易犯错的”傻瓜“逻辑即可完成复杂的业务需求开发。

最后用Dart复刻了一遍IGListkit的diff算法 代码在这里可以直接在线玩: diff in dart

参考资料:

A better way to update UICollectionView data in Swift with diff framework
Diff应用:从LCS到UICollectionView

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容