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

最新推荐文章于 2022-08-31 15:50:23 发布

weixin_30533797

最新推荐文章于 2022-08-31 15:50:23 发布

阅读量659

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunflowerGIS/p/6740481.html

版权

本文讨论了在React组件加载时如何处理后台数据请求的问题。传统的异步请求方式可能导致页面两次刷新，影响用户体验。文章提出了使用同步请求的方法，确保数据获取完成后才执行render操作，减少资源浪费并提升用户体验，适合作为组件封装的策略。

摘要由CSDN通过智能技术生成

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

加载组价的时候，未获得数据，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/>