文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React Suspense前后端IO异步操作处理的方法

2023-07-02 10:17

关注

这篇文章主要讲解了“React Suspense前后端IO异步操作处理的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React Suspense前后端IO异步操作处理的方法”吧!

简单介绍Suspense

Suspense主要用来解决网络IO问题,它早在2018年的React 16.6.0版本中就已发布。它的相关用法有些已经比较成熟,有的相对不太稳定,甚至经历了重命名、删除:

如果你还没有明白这是什么意思那我简单的表述成下面这句话:

调用render函数->发现有异步请求->悬停,等待异步请求结果->再渲染展示数据

看着是非常神奇的,用同步方法写异步,而且没有yield/async/await,简直能把人看傻眼了。这么做的好处自然就是,我们的思维逻辑非常的简单,清楚,没有callback,没有其他任何玩意,不能不说,看似优雅了非常多而且牛逼。

Suspense主要用法和场景

在前端开发中,经常会有这样的需求,加载某个界面时,如果界面的资源比较大,前端对数据的处理也需要时间,加载比较慢,这时候我们需要用一个加载动画或者提示,使得交互更加友好。

一. React18之前的做法

在React18之前,我们要实现上面这个效果,请求数据或者加载新的组件的时机一般在componentDidMount,在State中需要一个flag变量来记录请求数据的状态,后续手动更改这个状态,非常的不方便。代码如下:

class App extends Component {  state = {isLoading: false,  }  componentDidMount() {    this.setState({      data: null,isLoading: true,    });    axios.get('/api/getData').then((data) => {      this.setState({        data,isLoading: false,      });    });  }  render() {    return this.state.loading ? '正在加载中...' : (      <Page data={data} />    );  }}

二. React18之后

React.lazy

React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积,并延迟加载在初次渲染时未用到的组件

const SomeComponent = React.lazy(() => import('./SomeComponent'));

渲染 lazy 组件依赖该组件渲染树上层的 &lt;React.Suspense&gt; 组件。这是指定加载指示器(loading indicator)的方式。

React.Suspense

React.Suspense 可以指定加载指示器(loading indicator),以防其组件树中的某些子组件尚未具备渲染条件:

// 该组件是动态加载的const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {  return (    // 显示 <Spinner> 组件直至 OtherComponent 加载完成    <React.Suspense fallback={<Spinner />}>      <div>        <OtherComponent />      </div>    </React.Suspense>   );}

Suspense配合前端表格组件处理前后端IO异步操作

因为没有后端逻辑,前端表格组件主要用于在前端对 Excel、Grid 表格数据在线编辑和展示,而利用Suspense的技术特点,便可以轻松实现前后端IO异步操作:

const PureSpread = React.lazy(() => import('./components/pureSpread'))const SpreadDesigner = React.lazy(() => import('./components/designer'))const {Content,Header} = Layoutconst App = () => (  <Layout className="app">     <IndexSider/>     <Layout>        <Content className="index-content">          <HashRouter>              <Switch>                <Suspense fallback={<div>loading...</div>}>                  <Route exact path="/" component={PureSpread}/>                  <Route exact path="/designer" component={SpreadDesigner}/>                   </Suspense>              </Switch>          </HashRouter>        </Content>        <IndexFooter/>     </Layout>  </Layout>)

看一下效果:

React Suspense前后端IO异步操作处理的方法

感谢各位的阅读,以上就是“React Suspense前后端IO异步操作处理的方法”的内容了,经过本文的学习后,相信大家对React Suspense前后端IO异步操作处理的方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯