巧用同步请求处理react页面刷新问题
Posted 向_日_葵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了巧用同步请求处理react页面刷新问题相关的知识，希望对你有一定的参考价值。
很多时候，我们会遇到这种情况，组件加载需要请求后台数据，然后填充组件。那么我们一般会这样处理：如【使用异步请求的方式】代码；
- 加载组价的时候，未获得数据，render一个空的div；
- 然后异步请求数据，获得数据后再forceupdate，刷新组件，将数据显示出来；
分析这种方式，首先刷新了两次，浪费资源；其次，在用户体验上，页面会有刷新的感觉，用户体验不好。
1 /* 2 档案详细信息查看panel 3 @param data 档案对象 4 @param archiveType 档案类型 5 @param attachs 附件列表 6 */ 7 var ArchiveDetailPanel=React.createClass({ 8 getDefaultProps:function(){ 9 10 }, 11 getArchiveInfoTable:function(p_data,p_type){// 根据档案类型，生成档案类型 12 switch(p_type){ 13 case "贷款档案": 14 return <InfoForm data={this.props.data}> 15 <LoanArchiveBaseInfo/> 16 </InfoForm>; 17 break; 18 case "归集档案": 19 return <InfoForm data={this.props.data}> 20 <PoolArchiveBaseInfo/> 21 </InfoForm>; 22 break; 23 case "会计档案": 24 return <InfoForm data={this.props.data}> 25 <AccountingArchiveBaseInfo/> 26 </InfoForm>; 27 break; 28 case "执法档案": 29 return <InfoForm data={this.props.data}> 30 <EnforceArchiveBaseInfo/> 31 </InfoForm>; 32 33 break; 34 case "提取档案": 35 return <InfoForm data={this.props.data}> 36 <ExtractArchiveBaseInfo/> 37 </InfoForm>; 38 break; 39 } 40 }, 41 42 print:function() { 43 var _url=CTX+"/web/print/printFileList.jsp?id="+this.props.data["id"]+"&type="+this.props.archiveType; 44 window.open(_url); 45 }, 46 getAttachs:function(){ 47 var _obj=this; 48 var _attachments=[]; 49 var _attachUrl=CTX+"/attachments/getAttachByAID_Type"; 50 var _params={}; 51 _params["type"]=this.props.archiveType; 52 _params["id"]=this.props.data["id"]; 53 54 $.ajax({ 55 url : _attachUrl, 56 data:_params, 57 cache : false, 58 async : true, 59 type : "POST", 60 dataType : ‘json‘, 61 success : function(p_res){ 62 $.each(p_res,function(p_index){ 63 p_res[p_index]["resId"]=this["资源id"]==-1? undefined:this["资源id"]; 64 }); 65 66 _obj.props["attachs"]=p_res; 67 _obj.forceUpdate(); 68 } 69 }); 70 }, 71 render:function(){ 72 var _obj=this; 73 var _style = {width:"100%",textAlign:"center"}; 74 for (var i in this.props.style) { 75 // 方便增加新的style属性，而不用每次配置 76 _style[i] = this.props.style[i]; 77 } 78 79 // 同步获取附件信息 80 this.getAttachs(); 81 if(this.props["attachs"]) 82 return <div> 83 <InfoPanel> 84 <div className={"panel " + "panel-default"}> 85 <TitleText text={"档案详细信息-"+this.props["archiveType"]}/> 86 {this.getArchiveInfoTable(this.props["data"],this.props["archiveType"])} 87 </div> 88 <div className={"panel " + "panel-default"}> 89 <TitleText text="卷内资料"/><a style={{cursor:"pointer",position:"absolute",right:"40px",marginTop:"-30px"}} onClick={this.print}>打印</a> 90 <AttachmentTable canRemoveItem={false} className="attachTable" data={this.props["attachs"]}/> 91 </div> 92 </InfoPanel> 93 </div>; 94 else 95 return <div/>; 96 } 97 });
那么怎么解决呢？可以使用同步请求的方式。虽然很多时候不用同步请求了，但是在这种环境下，还是很有用的。如下代码
1 /* 2 档案详细信息查看panel 3 @param data 档案对象 4 @param archiveType 档案类型 5 @param attachs 附件列表 6 */ 7 var ArchiveDetailPanel=React.createClass({ 8 getDefaultProps:function(){ 9 10 }, 11 getArchiveInfoTable:function(p_data,p_type){// 根据档案类型，生成档案类型 12 switch(p_type){ 13 case "贷款档案": 14 return <InfoForm data={this.props.data}> 15 <LoanArchiveBaseInfo/> 16 </InfoForm>; 17 break; 18 case "归集档案": 19 return <InfoForm data={this.props.data}> 20 <PoolArchiveBaseInfo/> 21 </InfoForm>; 22 break; 23 case "会计档案": 24 return <InfoForm data={this.props.data}> 25 <AccountingArchiveBaseInfo/> 26 </InfoForm>; 27 break; 28 case "执法档案": 29 return <InfoForm data={this.props.data}> 30 <EnforceArchiveBaseInfo/> 31 </InfoForm>; 32 33 break; 34 case "提取档案": 35 return <InfoForm data={this.props.data}> 36 <ExtractArchiveBaseInfo/> 37 </InfoForm>; 38 break; 39 } 40 }, 41 42 print:function() { 43 var _url=CTX+"/web/print/printFileList.jsp?id="+this.props.data["id"]+"&type="+this.props.archiveType; 44 window.open(_url); 45 }, 46 getAttachs:function(){ 47 var _obj=this; 48 var _attachments=[]; 49 var _attachUrl=CTX+"/attachments/getAttachByAID_Type"; 50 var _params={}; 51 _params["type"]=this.props.archiveType; 52 _params["id"]=this.props.data["id"]; 53 54 $.ajax({ 55 url : _attachUrl, 56 data:_params, 57 cache : false, 58 async : false, 59 type : "POST", 60 dataType : ‘json‘, 61 success : function(p_res){ 62 $.each(p_res,function(p_index){ 63 p_res[p_index]["resId"]=this["资源id"]==-1? undefined:this["资源id"]; 64 }); 65 66 _obj.props["attachs"]=p_res; 67 } 68 }); 69 }, 70 render:function(){ 71 var _obj=this; 72 var _style = {width:"100%",textAlign:"center"}; 73 for (var i in this.props.style) { 74 // 方便增加新的style属性，而不用每次配置 75 _style[i] = this.props.style[i]; 76 } 77 78 // 同步获取附件信息 79 //this.getAttachs(); 80 81 return <div> 82 <InfoPanel> 83 <div className={"panel " + "panel-default"}> 84 <TitleText text={"档案详细信息-"+this.props["archiveType"]}/> 85 {this.getArchiveInfoTable(this.props["data"],this.props["archiveType"])} 86 </div> 87 <div className={"panel " + "panel-default"}> 88 <TitleText text="卷内资料"/><a style={{cursor:"pointer",position:"absolute",right:"40px",marginTop:"-30px"}} onClick={this.print}>打印</a> 89 <AttachmentTable canRemoveItem={false} className="attachTable" data={this.props["attachs"]}/> 90 </div> 91 </InfoPanel> 92 </div>; 93 } 94 });
使用同步请求的方式，再获得数据以后，才会执行完render操作，只刷新一次，也不会让用户体验到刷新的感觉，完美解决问题！！
这样在组件的封装上有大用处，可以将一些通用的，不用关注的代码，封装到组件中，方便很多很多！
以上是关于巧用同步请求处理react页面刷新问题的主要内容，如果未能解决你的问题，请参考以下文章