性能优化之可取消的异步操作

原文链接

概述

在项目开发中离不了的需要进行一些异步操作,这些异步操作在改善用户体验的同时也带来了一些性能隐患。比如,在某页面进行异步操作,异步操作还没有完成时,该页面已经关闭,这时由于异步操作的存在,导致系统无法及时的回收资源,从而导致性能的降低,甚至出现oom。总而言之,异步操作在改善用户体验,增强系统灵活性的同时也带来了一些性能隐患,如果使用不当则会带来一些副作用。

那么如何在使用异步操作的同

进行等使用问题。

所以我们需要在编程中学会“舍得”,在适当的时候去取消一些异步操作。

为Promise插上可取消的翅膀

Promise是React Native开发过程中用于异步操作的最常用的API,但Promise没有提供用于取消异步操作的方法。为了实现可取消的异步操作,我们可以为Promise包裹一层可取消的外衣。

然后可以这样使用取消操作:

上述方法,可以为异步操作添加可取消的功能,但是使用还是不够方便:在每个使用makeCancelable的页面都需要复制粘贴上述代码。

下面我们做一下改进,将上述代码抽离到一个文件中。

这样在使用的时候只需要将makeCancelable导入到你的相应js文件中就可以了。

import    makeCancelable    from'../util/Cancelable'

可取消的网络请求fetch

fetch是React Native开发过程中最常用的网络请求API,和Promis一样,fetch也没有提供用于取消已发出的网络请求的API。因为fetch返回的是一个Promise,所以我们可以借助上述方法,�来取消fetch所发出的网络请求。

取消网络请求:

this.cancelable.cancel();

在项目中的使用:

为了提高React Native应用的性能,我们需要在组件卸载的时候不仅要主动释放掉所持有的资源,也要取消所发出的一些异步请求操作。

component   WillUnmount() {   this.cancelable.cancel();   }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。