前沿

在前端的项目开发中,异步操作是一个不可获取的,从用户的角度来说,异步操作所带来的体验是美妙的,但有时候也会带来一些性能隐患。比如说:有一个异步请求还没有返回结果,但是页面却关闭了,这时由于异步操作的存在,系统不能及时回收内存。

作者在今天就遇到了一个这样的场景,比如有一个输入框,用户点击搜索,发起异步请求,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性能优化之可取消的异步操作的更多相关文章

  1. React Native 性能优化指南【全网最全,值得收藏】

    2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了.文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能 ...

  2. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  3. 如何对react进行性能优化

    React本身就非常关注性能,其提供的虚拟DOM搭配上DIff算法,实现对DOM操作最小粒度的改变也是非常高效的,然而其组件的渲染机制,也决定了在对组件更新时还可以进行更细致的优化.  react组件 ...

  4. 看Facebook是如何优化React Native性能

    原文出处: facebook   译文出处:@Siva海浪高 该文章翻译自Facebook官方博客,传送门 React Native 允许我们运用 React 和 Relay 提供的声明式的编程模型, ...

  5. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  6. React组件性能优化总结

    性能优化的思路 影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow). React的Virtual DOM就是尽可能地减少浏览器的重排和重绘. 从React渲染过程来看,如何防 ...

  7. React项目性能优化

    1. 使用生产版本和Fragment 1. 生产版本 确保发布的代码是生产模式下(压缩)打包的代码. 一般运行npm run build命令. 直接从webpack看配置文件,需要设置mode = ' ...

  8. react教程 — 性能优化

    参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https: ...

  9. react中性能优化的点

    react提升代码性能的点 1.绑定如果改变作用域点话放在constructor里面做,这样可以保证整个程序的作用域绑定操作只会执行一次,而且避免子组件的无谓渲染. 2.内置的setState是个异步 ...

随机推荐

  1. spring boot(三):spring data jpa的使用

    @RequestMapping("/queryUserListByPageNativeQuery") public String queryUserListByPageNative ...

  2. [转载]Getting Started with ASP.NET vNext and Visual Studio 14

    说在转载之前的话:ASP.NET框架之前不断做大,而vNext则是从头开始,对ASP.NET框架进行拆分并瘦身,面对不同的需求而更加灵活,各个拆分出来的模块更加轻量.vNext的出现,对ASP.NET ...

  3. EOJ Monthly 2019.2 (based on February Selection) D.进制转换

    题目链接: https://acm.ecnu.edu.cn/contest/140/problem/D/ 题目: 思路: 我们知道一个数在某一个进制k下末尾零的个数x就是这个数整除kx,这题要求刚好末 ...

  4. sparse coding

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  5. phpStudy apache无法启动 apache启动后又停止

    一.是防火墙拦截: 二.是80端口已经被别的程序占用,如IIS,迅雷等: 三.是没有安装VC9运行库,php和apache都是VC9编译: 四.虚拟机配置路径中有中文: 五.在检测端口后强制重启 把配 ...

  6. 87.在ModelSim中添加Xilinx ISE仿真库

    在ModelSim中添加Xilinx ISE仿真库 说明: l ModelSim一定要安装在不带空格的目录下,即不要安装在“Program Files”目录下.如作者是安装在D:\softwares\ ...

  7. C 之回调函数

    软件模块之间总是存在着一定的接口,从调用方式上,可以把他们分为三类:同步调用.回调和异步调用.同步调用是一种阻塞式调用,调用方要等待对方执行完毕才返回,它是一种单向调用:回调是一种双向调用模式,也就是 ...

  8. Gradle教程链接

    Gradle教程:https://www.yiibai.com/gradle/ https://www.cnblogs.com/wxishang1991/p/5532006.html

  9. 洛谷P3366最小生成树

    传送门啦 #include <iostream> #include <cstdio> #include <cstring> #include <algorit ...

  10. 洛谷P1938 找工就业

    传送门啦 这个题本质就是跑一边最长路,重点就是在怎么建图上. 我们可以把点权放到边权上面,即将每一个边的终点点权当做这个边的边权,这个题里就是将工钱 $ d $ 当做边权. 如果这一条边需要坐飞机才能 ...