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

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

1. 加载组价的时候，未获得数据，render一个空的div；
2. 然后异步请求数据，获得数据后再forceupdate，刷新组件，将数据显示出来；

分析这种方式，首先刷新了两次，浪费资源；其次，在用户体验上，页面会有刷新的感觉，用户体验不好。

 /*
     档案详细信息查看panel
     @param data 档案对象
     @param archiveType 档案类型
     @param attachs 附件列表
 */
 var ArchiveDetailPanel=React.createClass({
     getDefaultProps:function(){

     },
     getArchiveInfoTable:function(p_data,p_type){// 根据档案类型，生成档案类型
         switch(p_type){
             case "贷款档案":
                 return <InfoForm data={this.props.data}>
                     <LoanArchiveBaseInfo/>
                 </InfoForm>;
                 break;
             case "归集档案":
                 return <InfoForm data={this.props.data}>
                     <PoolArchiveBaseInfo/>
                 </InfoForm>;
                 break;
             case "会计档案":
                 return <InfoForm data={this.props.data}>
                     <AccountingArchiveBaseInfo/>
                 </InfoForm>;
                 break;
             case "执法档案":
                 return <InfoForm data={this.props.data}>
                     <EnforceArchiveBaseInfo/>
                 </InfoForm>;

                 break;
             case "提取档案":
                 return <InfoForm data={this.props.data}>
                     <ExtractArchiveBaseInfo/>
                 </InfoForm>;
                 break;
         }
     },

     print:function() {
         var _url=CTX+"/web/print/printFileList.jsp?id="+this.props.data["id"]+"&type="+this.props.archiveType;
         window.open(_url);
     },
     getAttachs:function(){
         var _obj=this;
         var _attachments=[];
         var _attachUrl=CTX+"/attachments/getAttachByAID_Type";
         var _params={};
         _params["type"]=this.props.archiveType;
         _params["id"]=this.props.data["id"];

         $.ajax({
                 url : _attachUrl,
                 data:_params,
                 cache : false,
                 async : true,
                 type : "POST",
                 dataType : 'json',
                 success : function(p_res){
                     $.each(p_res,function(p_index){
                         p_res[p_index]["resId"]=this["资源id"]==-1? undefined:this["资源id"];
                     });

                     _obj.props["attachs"]=p_res;
                             _obj.forceUpdate();
                 }
             });
     },
     render:function(){
         var _obj=this;
         var _style = {width:"100%",textAlign:"center"};
         for (var i in this.props.style) {
             // 方便增加新的style属性，而不用每次配置
             _style[i] = this.props.style[i];
         }

         // 同步获取附件信息
         this.getAttachs();
                 if(this.props["attachs"])
         return <div>
             <InfoPanel>
                 <div className={"panel " + "panel-default"}>
                     <TitleText text={"档案详细信息-"+this.props["archiveType"]}/>
                     {this.getArchiveInfoTable(this.props["data"],this.props["archiveType"])}
                 </div>
                 <div className={"panel " + "panel-default"}>
                     <TitleText text="卷内资料"/><a style={{cursor:"pointer",position:"absolute",right:"40px",marginTop:"-30px"}} onClick={this.print}>打印</a>
                     <AttachmentTable canRemoveItem={false} className="attachTable" data={this.props["attachs"]}/>
                 </div>
             </InfoPanel>
         </div>;
 else
     return <div/>;
     }
 });            

使用异步请求的方式

那么怎么解决呢？可以使用同步请求的方式。虽然很多时候不用同步请求了，但是在这种环境下，还是很有用的。如下代码

 /*
     档案详细信息查看panel
     @param data 档案对象
     @param archiveType 档案类型
     @param attachs 附件列表
 */
 var ArchiveDetailPanel=React.createClass({
     getDefaultProps:function(){

     },
     getArchiveInfoTable:function(p_data,p_type){// 根据档案类型，生成档案类型
         switch(p_type){
             case "贷款档案":
                 return <InfoForm data={this.props.data}>
                     <LoanArchiveBaseInfo/>
                 </InfoForm>;
                 break;
             case "归集档案":
                 return <InfoForm data={this.props.data}>
                     <PoolArchiveBaseInfo/>
                 </InfoForm>;
                 break;
             case "会计档案":
                 return <InfoForm data={this.props.data}>
                     <AccountingArchiveBaseInfo/>
                 </InfoForm>;
                 break;
             case "执法档案":
                 return <InfoForm data={this.props.data}>
                     <EnforceArchiveBaseInfo/>
                 </InfoForm>;

                 break;
             case "提取档案":
                 return <InfoForm data={this.props.data}>
                     <ExtractArchiveBaseInfo/>
                 </InfoForm>;
                 break;
         }
     },

     print:function() {
         var _url=CTX+"/web/print/printFileList.jsp?id="+this.props.data["id"]+"&type="+this.props.archiveType;
         window.open(_url);
     },
     getAttachs:function(){
         var _obj=this;
         var _attachments=[];
         var _attachUrl=CTX+"/attachments/getAttachByAID_Type";
         var _params={};
         _params["type"]=this.props.archiveType;
         _params["id"]=this.props.data["id"];

         $.ajax({
                 url : _attachUrl,
                 data:_params,
                 cache : false,
                 async : false,
                 type : "POST",
                 dataType : 'json',
                 success : function(p_res){
                     $.each(p_res,function(p_index){
                         p_res[p_index]["resId"]=this["资源id"]==-1? undefined:this["资源id"];
                     });

                     _obj.props["attachs"]=p_res;
                 }
             });
     },
     render:function(){
         var _obj=this;
         var _style = {width:"100%",textAlign:"center"};
         for (var i in this.props.style) {
             // 方便增加新的style属性，而不用每次配置
             _style[i] = this.props.style[i];
         }

         // 同步获取附件信息
         //this.getAttachs();

         return <div>
             <InfoPanel>
                 <div className={"panel " + "panel-default"}>
                     <TitleText text={"档案详细信息-"+this.props["archiveType"]}/>
                     {this.getArchiveInfoTable(this.props["data"],this.props["archiveType"])}
                 </div>
                 <div className={"panel " + "panel-default"}>
                     <TitleText text="卷内资料"/><a style={{cursor:"pointer",position:"absolute",right:"40px",marginTop:"-30px"}} onClick={this.print}>打印</a>
                     <AttachmentTable canRemoveItem={false} className="attachTable" data={this.props["attachs"]}/>
                 </div>
             </InfoPanel>
         </div>;
     }
 });

使用同步请求的方式

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

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