巧用同步請求處理react頁面刷新問題

本文轉載自查看原文 2017-04-20 19:43 14627 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操作，只刷新一次，也不會讓用戶體驗到刷新的感覺，完美解決問題！！

這樣在組件的封裝上有大用處，可以將一些通用的，不用關注的代碼，封裝到組件中，方便很多很多！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React 子組件state內數組修改頁面不刷新問題 React 項目生產版本迭代頁面不刷新問題 React 路由參數改變頁面不刷新問題 vue 處理數據變化但頁面不實時刷新問題 react-navigation createBottomTabNavigator 刷新問題 vue this.$forceUpdate() 處理頁面刷新問題（v-for循環值刷新等）點擊回車，頁面刷新問題 iframe頁面刷新問題【轉】 html或者jsp頁面刷新問題重定向解決頁面刷新問題