React-Native延迟加载数据,避免更新数据时造成画面卡顿的方案_native react 延时刷新_angelseedex的博客-程序员宝宝

技术标签: React-Native  React-Native踩坑  

不得不说React-Native的Component生命周期还真是坑,文档里说在执行到componentDidMount方法后就可以开开心心的搞事了,没想到在这里加载完网络数据执行state更新的时候居然会影响到Navigator中新页面的启动。具体的问题是这样的:


componentDidMount() {
    this._fetchData();
}


在componentDidMount方法中执行了fetchData方法来拉取网络数据,并在拉取到数据后通过更新state来更新UI

_fetchData() {
   let url = 'http://www.exsample.com/comment';
   fetch(url)
   .then((response) => response.json())
   .then((responseData) => {
      let dataMap = responseData.data.page.map;
      let dataBlob = [];
      for (let i in dataMap) {
         dataBlob.push(dataMap[i].content);
      }
      if(dataBlob.length !== 0) {
         let first = dataBlob.shift();
      this.setState({
         commentList: dataBlob,
         firstFloor: first,
      });
    }
  }).catch((error)=>{
     console.error(error);
  });
}

按照React-Native的生命周期调用规则,在setState之后,RN会依次调用shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate生命周期方法。然而问题就出在state更新后调用render方法时,会停止当前Component进入屏幕时的滚动动画。造成新Component进入画面一半时停住,甚至新Component还没开始进入画面时就 停住,等到componentDidUpdate执行完成后才继续向前滚动。严重影响使用体验。

这个时候我们就需要让这个state更新操作延迟进行。为了实现这个目的,可以使用RN提供的一个工具: InteractionManager

从名称上可以看出,这是一个管理互动操作的工具。其中有一个方法 runAfterInteraction(func) 。这个方法用来标记参数中传入的方法在所有当前进行的交互和动画完成后再执行。可以理解为将func加入到一个等待队列。

我们可以使用这个方法来避免在Component进入画面的动画完成前打断动画的问题。类似于这样:

componentDidMount() {
   InteractionManager.runAfterInteractions(()=>{
      this._fetchData();
   });
}

这样,在Component进入画面的动画结束后,才会执行拉取数据的操作,这个逻辑才符合我们的预期。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/angelseedex/article/details/53339107

智能推荐

使用HashMap需要注意的事儿:不要暴露Map.entry给外部不可信代码Map.entrySet()_aitangyong的博客-程序员宝宝

通过Map.entrySet()的返回结果,能够删除原始HashMap中存储的键值对。如果我们将Set<Map.Entry<String, String>> allEntrys 作为函数参数传递给不可信代码,那么外部的恶意代码就能删除原始HashMap中存储的数据。所以我们应该避免传递Set<Map.Entry<String, String>>作为函数参数,防止外部代码恶意的或者不小心修改了原始的数据。这个隐藏的功能不是所有的java程序员都知道,所以需要注意下,以免编程出错。

windows自带的截图方法_win server 截图_hhaoma的博客-程序员宝宝

键盘上的PrintScreen键可以实现这个功能。 此键有二种用法:1)直接按PrintScreen键,就是截取全屏的图像,然后按ctrl+c复制,再打开windows的程序,按ctrl+v就可以看到截取的图像;2)按组合键Alt + PrintScreen键,截取当前窗口图片(就是最上面的窗口),然后按ctrl+c复制,再打开windows的“画图”程序,按ctrl+v就可以看到截取的图。 “画

asp.net错误信息(检测到有潜在危险的 Request.Form)_weixin_34248023的博客-程序员宝宝

在做asp.net开发的时候,在向后台服务器回传数据时(例:TextBox,WebHtmlEdit回传数据).如何回传的数据包含一些特殊的字答的话,在运行的时候就会报:检测到有潜在危险的 Request.Form解决方案1、web.config文件&lt;system.web&gt;后面加入这一句: &lt;pages validateRequest="false"/&gt; 示...

oracle 10g 关闭crs,Oracle 10gRAC启动关闭命令说明_Oliverzzzhang的博客-程序员宝宝

若提示以下命令不存在,是因为路径没指定,用find /oracle -name crs_stat回车,可查找到crs_stat文件位置,其他命令所在目录用同样方法查到,如果查询/oracle目录以外的路径,用root权限查询,切换方法为:su root回车,输入密码,回车即切换为root权限了ORACLE 10G RAC 启动及关闭步骤如何进行Oracle10g RAC关闭及启动一:关闭ORACL...

ABAP Programs For Learners_Footloose_的博客-程序员宝宝

simple alv totalREPORT zdemo_alvgrid .type-pools: slis. *Data Declarationdata: BEGIN OF itab occurs 0,F1 TYPE I,F2 TYPE I,F3 TYPE I,END OF itab.data: it_fieldcatalog type slis_t_

随便推点

No cached version of xxx available for offline mode_JamesYangwz的博客-程序员宝宝

No cached version of xxx available for offline mode.在Android studio 4.0以上版本,在File -&gt; Settings -&gt; Build, Execution,Deployment-&gt;Gradle-&gt;已经没有offline这个选项了在高版本的Android studio 中gradle作为 idea 的一个插件。在android studio 右侧菜单中出现,如果需要切换离线模式,需要在右侧栏点击gradl

SwaggerAPI注解详解及注解常用参数配置_Serena0814的博客-程序员宝宝

原博文地址:https://blog.csdn.net/java_yes/article/details/79183804官网github地址:https://github.com/swagger-api/swagger-core/wiki/Annotations-1.5.X注解@Api:作用在类上,用来标注该类具体实现内容。表示标识这个类是swagger的资源 。参数:tags:可...

算法题:科学计数法_让我们荡起双脚的博客-程序员宝宝

题目描述科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式[+-][1-9]”.”[0-9]+E[+-][0-9]+,即数字的整数部分只有1位,小数部分至少有1位,该数字及其指数部分的正负号即使对正数也必定明确给出。现以科学计数法的格式给出实数A,请编写程序按普通数字表示法输出A,并保证所有有效位都被保留。输入描述:每个输入包含1个测试用例,即一个以科学计数法表示的实数A。

hdu2111(贪心)_编码之夜的博客-程序员宝宝

Saving HDUTime Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 5484    Accepted Submission(s): 2507Problem Description话说上回讲到海东集团面临内外交

在struts2.3.4.1中使用注解、反射、拦截器实现基于方法的权限控制_weixin_33905756的博客-程序员宝宝

权限控制是每一个系统都应该有的一个功能,有些只需要简单控制一下就可以了,然而有些却需要进行更加深入和细致的权限控制,尤其是对于一些MIS类系统,基于方法的权限控制就更加重要了。用反射和自定义注解来实现基于struts2的方法级别的权限控制的主要思想是这样的。1、先定义一个用于识别在进行action调用的时候标注该方法调用是否需要权限控制,需要什么样的权限的注解类。该注解类一般会包括两个属性,一...

AD教程系列 | 0-认识Altium Designer:汉化和新建项目_ad软件是什么-程序员宝宝

 本篇文章是AD教程系列的第一篇,主要内容有:Altium Designer软件功能介绍、常用界面和窗口介绍。 Altium Designer简称AD,是软件开发商Altium公司推出的一体化的电子产品开发系统,主要运行在Windows操作系统上,可以实现:原理图设计、层次化设计、集成库设计、PCB设计、多板设计、混合仿真、制造输出等一系列的功能。本教程希望通过最简单的图片形式,让新手快速入门,本教程所使用的AD版本为:19.1.2 本文是toyjis_yao的原创文章,转载引用需注明出处,对于文中有疑

推荐文章

热门文章

相关标签