React Native性能优化之可取消的异步操作
前沿
在前端的项目开发中,异步操作是一个不可获取的,从用户的角度来说,异步操作所带来的体验是美妙的,但有时候也会带来一些性能隐患。比如说:有一个异步请求还没有返回结果,但是页面却关闭了,这时由于异步操作的存在,系统不能及时回收内存。
作者在今天就遇到了一个这样的场景,比如有一个输入框,用户点击搜索,发起异步请求,1.结果还没有返回回来,可以点击取消取消本次异步操作。2.用户关闭当前页面,取消本次异步操作。
解决方案
给Promise包裹上一层可以取消的功能,在then中判断根据传入的一个token去判断是否需要取消,然后是需要取消,则return,结束后续的action
export function onSearch(inputKey, pageSize, token, favoriteDao, popularKeys, callBack) {
return dispatch => {
dispatch({
type: Types.SEARCH_REFRESH
})
fetch(genFetchUrl(inputKey))
.then(response => {
return hasCancel(token) ? null : response.json(); // 如果任务取消,则不作任何处理
})
.then(responseData => {
if (hasCancel(token, true)) { // 如果任务取消,则不作任何处理
console.log(' user cancel task');
return;
}
if (!responseData || responseData.items || responseData.items.length === 0) {
dispatch({
type: Types.SEARCH_FAIL,
message: `沒找到关于${inputKey}相关的信息`
})
doCallBack(callBack, `没找到关于${inputKey}相关的项目`)
return;
}
let items = responseData.items;
handleData(Types.SEARCH_REFRESH_SUCCESS, dispatch, '', {data: items}, pageSize, favoriteDao, {
showBottomButton: !Utils.checkKeysIsExist(popularKeys, inputKey),
inputKey,
})
})
.catch(e => {
console.log(e);
dispatch({type:Types.SEARCH_FAIL, error: e})
})
}
}
React Native性能优化之可取消的异步操作的更多相关文章
- React Native 性能优化指南【全网最全,值得收藏】
2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了.文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能 ...
- React 组件性能优化
React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...
- 如何对react进行性能优化
React本身就非常关注性能,其提供的虚拟DOM搭配上DIff算法,实现对DOM操作最小粒度的改变也是非常高效的,然而其组件的渲染机制,也决定了在对组件更新时还可以进行更细致的优化. react组件 ...
- 看Facebook是如何优化React Native性能
原文出处: facebook 译文出处:@Siva海浪高 该文章翻译自Facebook官方博客,传送门 React Native 允许我们运用 React 和 Relay 提供的声明式的编程模型, ...
- React组件性能优化
转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...
- React组件性能优化总结
性能优化的思路 影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow). React的Virtual DOM就是尽可能地减少浏览器的重排和重绘. 从React渲染过程来看,如何防 ...
- React项目性能优化
1. 使用生产版本和Fragment 1. 生产版本 确保发布的代码是生产模式下(压缩)打包的代码. 一般运行npm run build命令. 直接从webpack看配置文件,需要设置mode = ' ...
- react教程 — 性能优化
参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool 或 https: ...
- react中性能优化的点
react提升代码性能的点 1.绑定如果改变作用域点话放在constructor里面做,这样可以保证整个程序的作用域绑定操作只会执行一次,而且避免子组件的无谓渲染. 2.内置的setState是个异步 ...
随机推荐
- spring boot(三):spring data jpa的使用
@RequestMapping("/queryUserListByPageNativeQuery") public String queryUserListByPageNative ...
- [转载]Getting Started with ASP.NET vNext and Visual Studio 14
说在转载之前的话:ASP.NET框架之前不断做大,而vNext则是从头开始,对ASP.NET框架进行拆分并瘦身,面对不同的需求而更加灵活,各个拆分出来的模块更加轻量.vNext的出现,对ASP.NET ...
- EOJ Monthly 2019.2 (based on February Selection) D.进制转换
题目链接: https://acm.ecnu.edu.cn/contest/140/problem/D/ 题目: 思路: 我们知道一个数在某一个进制k下末尾零的个数x就是这个数整除kx,这题要求刚好末 ...
- sparse coding
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- phpStudy apache无法启动 apache启动后又停止
一.是防火墙拦截: 二.是80端口已经被别的程序占用,如IIS,迅雷等: 三.是没有安装VC9运行库,php和apache都是VC9编译: 四.虚拟机配置路径中有中文: 五.在检测端口后强制重启 把配 ...
- 87.在ModelSim中添加Xilinx ISE仿真库
在ModelSim中添加Xilinx ISE仿真库 说明: l ModelSim一定要安装在不带空格的目录下,即不要安装在“Program Files”目录下.如作者是安装在D:\softwares\ ...
- C 之回调函数
软件模块之间总是存在着一定的接口,从调用方式上,可以把他们分为三类:同步调用.回调和异步调用.同步调用是一种阻塞式调用,调用方要等待对方执行完毕才返回,它是一种单向调用:回调是一种双向调用模式,也就是 ...
- Gradle教程链接
Gradle教程:https://www.yiibai.com/gradle/ https://www.cnblogs.com/wxishang1991/p/5532006.html
- 洛谷P3366最小生成树
传送门啦 #include <iostream> #include <cstdio> #include <cstring> #include <algorit ...
- 洛谷P1938 找工就业
传送门啦 这个题本质就是跑一边最长路,重点就是在怎么建图上. 我们可以把点权放到边权上面,即将每一个边的终点点权当做这个边的边权,这个题里就是将工钱 $ d $ 当做边权. 如果这一条边需要坐飞机才能 ...