InteractionManager源码阅读笔记

InteractionManager的直接翻译是交互管理器,在react-native的文档里,其作用描述为:"Interactionmanager 可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证 JavaScript 动画的流畅运行。"

我们最常用这个类的场景是:从A页面跳转到B页面,然后想让B页面的网络请求或者页面刷新工作放到过场动画结束后再去做,这时可以用InteractionManager的runAfterInteractions函数来实现。

那么问题来了,如果A页面有一个循环不停止的动画,这时候再跳转B页面,B页面为了转场动画的顺畅使用了runAfterInteractions,但由于A页面的循环动画而永远无法进入回调闭包,这个问题怎么解决呢?

react-native官方已经考虑到了,在Animated类里面的loop方法,有这么一段话:"In addition, loops can prevent VirtualizedList-based components from rendering more rows while the animation is running. You can pass isInteraction: false in the child animation config to fix this."。虽然这段话不是在解决我们说的问题,但是所提到的isInteraction属性,我们可以通过Animated的源码,看到这个属性是用来干嘛的。

由此可见,这个isInteraction属性是用来控制是否创建句柄的。

那么关键的来了,InteractionManager.createInteractionHandle()和InteractionManager.runAfterInteractions()之间的具体关系是什么样的呢?

我们可以看看InteractionManager的源码

先看这一对函数:

一个是创建句柄一个是清除句柄,其实创建句柄很简单,所谓的句柄就是全局变量_inc自增后的结果,然后加入了_addInteractionSet的集合。清除句柄,就是把handle从_addInteractionSet中移除,加入_deleteInteractionSet。那么整个InteractionManager是如何运作起来的呢?runAfterInteractions中的回调是如何被调用的?这其实最核心的部分是在_scheduleUpdate里面:

_scheduleUpdate主要是处理了InteractionManager的deadline,然后调用了_processUpdate:

如上图所示,第一个红框里面其实就是InteractionManager最核心的部分。还记得刚才的createInteractionHandle和clearInteractionHandle么,其实整个InteractionManager就是实现了生产者消费者模型。第二个红框部分,其实就是去执行runAfterInteractions里面的闭包回调。我们最后再看runAfterInteractions:

参数task最终加入了_taskQueue中,而这个_taskQueue会在_processUpdate中被遍历执行。

用一个很通俗易懂的方法来解释InteractionManager,比如我们去面馆吃面,跟老板说我要一碗面(createInteractionHandle),然后我们就找个位子等老板把面端上来了(runAfterInteractions(()=>{console.log('吃面')})),过了一阵子老板面做好了,于是端上面(clearInteractionHandle),我们就吃到面了。那么又有个疑问了,为啥InteractionManager要设计的这么复杂呢?直接存一下回调,然后触发回调不就好了么。这就好比我们出去吃面,不可能吃光面一样。比如我们要吃一碗雪菜肉丝面,那么流程就得这样了:

最后,我们看一下react-native里面会有哪些地方默默的为我们createInteractionHandle呢?

一共就这两处,第一处就是创建动画的时候,官方文档上也说了可以用来延迟耗时操作,保证转场动画流畅。第二处是这个PanResponder,官方文档也做了解释,保证手势响应顺畅。但其实大家在理解了上面吃面的例子后,也可以扩展一下自己的思维,灵活的运用InteractionManager。

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

推荐阅读更多精彩内容