首页 > 代码库 > 巧用同步请求处理react页面刷新问题

巧用同步请求处理react页面刷新问题

 很多时候,我们会遇到这种情况,组件加载需要请求后台数据,然后填充组件。那么我们一般会这样处理:如【使用异步请求的方式】代码;

  1. 加载组价的时候,未获得数据,render一个空的div;
  2. 然后异步请求数据,获得数据后再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=http://www.mamicode.com/{this.props.data}>
15                     <LoanArchiveBaseInfo/>
16                 </InfoForm>;
17                 break;
18             case "归集档案":
19                 return <InfoForm data=http://www.mamicode.com/{this.props.data}>
20                     <PoolArchiveBaseInfo/>
21                 </InfoForm>;
22                 break;
23             case "会计档案":
24                 return <InfoForm data=http://www.mamicode.com/{this.props.data}>
25                     <AccountingArchiveBaseInfo/>
26                 </InfoForm>;
27                 break;
28             case "执法档案":
29                 return <InfoForm data=http://www.mamicode.com/{this.props.data}>
30                     <EnforceArchiveBaseInfo/>
31                 </InfoForm>;
32 
33                 break;
34             case "提取档案":
35                 return <InfoForm data=http://www.mamicode.com/{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=http://www.mamicode.com/{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=http://www.mamicode.com/{this.props.data}>
15                     <LoanArchiveBaseInfo/>
16                 </InfoForm>;
17                 break;
18             case "归集档案":
19                 return <InfoForm data=http://www.mamicode.com/{this.props.data}>
20                     <PoolArchiveBaseInfo/>
21                 </InfoForm>;
22                 break;
23             case "会计档案":
24                 return <InfoForm data=http://www.mamicode.com/{this.props.data}>
25                     <AccountingArchiveBaseInfo/>
26                 </InfoForm>;
27                 break;
28             case "执法档案":
29                 return <InfoForm data=http://www.mamicode.com/{this.props.data}>
30                     <EnforceArchiveBaseInfo/>
31                 </InfoForm>;
32 
33                 break;
34             case "提取档案":
35                 return <InfoForm data=http://www.mamicode.com/{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=http://www.mamicode.com/{this.props["attachs"]}/>
90                 </div>
91             </InfoPanel>
92         </div>;
93     }
94 });
使用同步请求的方式

使用同步请求的方式,再获得数据以后,才会执行完render操作,只刷新一次,也不会让用户体验到刷新的感觉,完美解决问题!!

这样在组件的封装上有大用处,可以将一些通用的,不用关注的代码,封装到组件中,方便很多很多!

巧用同步请求处理react页面刷新问题