短时间内多个请求状态更新,导致react 不能及时响应问题总结
个人总结
这段时间项目中遇到这样一个问题,旧项目中增加了一个聊天对话的模块,这是其他同学负责的部分,因为要有消息提醒,所以做了个轮询。消息提示因为是页头部分,所以每个模块都会引用到。这是背景。
现象
我负责的详情页部分,因为内容比较多,所以会有3个请求发出,修改的数据内容也比较多,来改变state以改变视图。
本次也只是加了点东西而已,原本是可以正常显示。
本地mock时也没什么问题,发布至测试环境发现数据不能得到渲染。 呈现出来就是页面一片空白。
调试过程
初步判断可能是代码逻辑问题,因为该页面涉及到新建,编辑,不同类型的不同展示情况,同时有编辑之后的预览。所以逻辑比较多
renderCont(type,post,isReview) {
let cont = null
//未获得返回,不渲染
if(!contentType){
return cont
}
//条件一
if(contentType == 1){
//更多省略
cont = <div>{str && this.getContent(str)}</div>
return cont
}
// 条件二
if(type ==1){
let coverImageUrl = post.get('coverImageUrl')
//。。。
return cont
}
//条件三四
return (isReview ? <div>1</div>:<div>2</div>)
}
断点跟进去之后发现,只走了第一个,默认无数据时的null,后面数据不再变化。排除数据异常的可能性之后。
猜测是短时间数据变动太多,导致react没有及时响应,因为pc是单页应用,页头部分的更新也在改变数据。
可以看一下我们五秒内的网络请求:
本地响应比较及时,没什么大的影响。测试环境上就发现断点进入到react判断是否更新的方法时,可以发现
- props 里element已经是填充了数据的dom对象,而更新判断认为没有改变。这个原因只能去猜测是同时更新太多状态没有得到及时响应。
具体原因,这里先占个坑,研究一下react更新机制再说
具体解决,也没什么好办法,既然同时更新导致,那就进行函数截流,
即轮询请求成功之后,使用setTimeout延时更新数据,这样是可以接受的,消息提示晚一点渲染也是没影响的。
短时间内多个请求状态更新,导致react 不能及时响应问题总结的更多相关文章
- React报错之无法在未挂载的组件上执行React状态更新
正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以 ...
- HttpWebResponse请求状态代码
HttpWebResponse请求状态代码标识 成员名称 说明 Continue 等效于 HTTP 状态 100.Continue指示客户端可能继续其请求. SwitchingProtocols 等效 ...
- Asp.Net保存session的三种方法 (Dll文件更新导致session丢失的解决办法)
1. InProc模式(默认值):asp.net将session保存到当前进程中,这种方式最快,但是不能多台服务器共享session,且会话状态数据容易丢失. <sessionState mod ...
- STMS传输队列中的请求状态一直是Running不能结束
通过STMS传输请求时,遇到了如下问题: STMS传输请求,不论等多久的时间,请求状态一直是running,不能结束.但检查传输的内容时,发现CHANGE REQUEST包含的内容已经传输到目标Cli ...
- Java问题记录——循环里的二次判断与状态更新
Java问题记录——循环里的二次判断与状态更新 摘要:本文主要记录了在循环操作时可能出现的问题. 问题重现 在使用循环结构时,如果使用了定时任务,或者代码会多次调用循环结构,可能会导致有些对象会被循环 ...
- nginx实时记录请求状态信息( ngx_realtime_request_module)
cd /usr/local/src/ wget "http://nginx.org/download/nginx-1.4.2.tar.gz" tar -xzvf nginx.tar ...
- HTTP请求状态类
<?php /** * 常用常量文件 * */ /** * HTTP协议请求状态 */ class HttpRequest { //100类 ----用于指定客户端应相应的某些动作---- co ...
- nginx流量带宽等请求状态统计( ngx_req_status)
介绍 ngx_req_status用来展示nginx请求状态信息,类似于apache的status,nginx自带的模块只能显示连接数等等信息,我们并不能知道到底有哪些请求.以及各url域名所消耗的带 ...
- Nginx 流量带宽等请求状态统计( ngx_req_status)
Nginx 流量带宽等请求状态统计 ( ngx_req_status) 插件下载地址: wget http://nginx.org/download/nginx-1.4.2.tar.gz git c ...
随机推荐
- ssh简明安全规划
禁止使用口令只允许使用密钥建立 SSH 连接 1.创建 SSH KEY 使用ssh-keygen生成一个密钥对,并且将公钥注册到服务器的 $HOME/.ssh/authorized_keys 文件. ...
- CSS3 转换2D transform
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- 8、公司的上市问题 - CEO之公司管理经验谈
在公司发展到一定阶段之后,CEO就能够考虑公司上市的问题了.一条线路,就是先成立公司,进行投资,然后上市赚取利润,根据不同公司的总经理的想法不同而定.这条路是现在很多公司领导要求的做法.因为,通过发行 ...
- canvas(七) 文字编写
/** * Created by xianrongbin on 2017/3/11. */ var dom = document.getElementById('clock'), ctx = dom. ...
- Node.js 蚕食计划(三)—— Express 启航
如果看过上一篇<Node.js 蚕食计划>,就会发现手动搭建一个 web 服务器还是比较繁琐 而 express 就是一个可以极大地提高开发效率的 web 开发框架 一.创建项目 在 ex ...
- mysql创建远程登陆用户并授权
在创建安装微擎的过程中,针对第四步 创建远程登陆用户并授权 > grant all PRIVILEGES on database.* to root@'127.0.0.1' id ...
- 北漂的IT人
北京的互联网人,是工作日完全没有个人生活的一类人,也是整个北漂大队伍中,下班时间最晚的那一波人,如果赶上周末还要加班,那毫不夸张地说,你的整个人生都在互联网上奋斗着. 虽说十点上班让多少行内外的人羡慕 ...
- 5大UX设计谬论,如何去补救?
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 每个新项目都是从学习开始的. 就像设计师需要了解一个特定的客户和他们的设计目标一样,客户需要了解设 ...
- js对象,set和get方法 的三种实现形式
var obj1 = { name: 'shaanxi', get nameGet() { return this.name + 'a'; }, set nameSet(name) { this.na ...
- 合并 CentOS 6.8 的两个ISO镜像
合并 CentOS 6.8 的两个ISO镜像 1.创建相关目录: [root@local ~] mkdir -p /mnt/dvd1 /mnt/dvd2 /mnt/dvd3 /mnt/iso 说明: ...