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

2024-11-29 04:06:33

简单介绍Suspense

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

在render函数中，我们可以写入一个异步请求，请求数据
react会从我们缓存中读取这个缓存
如果有缓存了，直接进行正常的render
如果没有缓存，那么会抛出一个异常，这个异常是一个promise
当这个promise完成后（请求数据完成），react会继续回到原来的render中（实际上是重新执行一遍render），把数据render出来
完全同步写法，没有任何异步callback之类的东西

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

调用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之后

1.React.lazy

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

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

渲染 lazy 组件依赖该组件渲染树上层的 <React.Suspense> 组件。这是指定加载指示器（loading indicator）的方式。

2.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} = Layout

const 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>
)

看一下效果：

本文Demo下载

以上就是React Suspense前后端IO异步操作处理的详细内容，更多关于React Suspense前后端IO异步的资料请关注我们其它相关文章！

react中Suspense的使用详解

关于Suspense的使用,先来看下示例代码 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div&
浅谈React前后端同构防止重复渲染

什么叫前后端同构? 为了解决某些问题(比如SEO.提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串.在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器. 到这里,服务端的活已经干完了,然后就是浏览器这边干活. 浏览器拿到HTML文本后,立刻进行渲染将内容呈现给用户.然后加载页面所需的 .js 文件,然后执行 JavaScript 脚本,然后开始初始化 react 组件---- 到这里问题就来了.react 初始化组件后会执行组件
react使用axios进行api网络请求的封装方法详解

目录前言准备工作开始封装axios config.js request.js 进行请求总结前言最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴准备工作进行请求需要使用axios,所以要先确定你已经安装完成了axios,查看package.json文件如果没有,请先安装axios npm install axios 开始封装axios 首先在src目录下新建axios文件夹,这里我们新建两个文件,分别是config.js和request
Vue3异步数据加载组件suspense的使用方法

目录前言创建组件总结前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档. 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求. 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这
React Suspense前后端IO异步操作处理

目录简单介绍Suspense Suspense主要用法和场景一. React18之前的做法二. React18之后 Suspense配合前端表格组件处理前后端IO异步操作简单介绍Suspense Suspense主要用来解决网络IO问题,它早在2018年的React 16.6.0版本中就已发布.它的相关用法有些已经比较成熟,有的相对不太稳定,甚至经历了重命名.删除: 在render函数中,我们可以写入一个异步请求,请求数据 react会从我们缓存中读取这个缓存如果有缓存了,直接进行正常
浅谈react前后端同构渲染

前后端同构渲染:当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这样,耗时相对较长.前后端同构渲染可以在页面初次加载时把所有地方渲染好一次性响应给客户端实现方式:保证包管理工具和模块依赖方式一致包管理工具-npm管理,保证前后端都使用同一个兼容包模块依赖方式-webpack,保证前后端都采用commonjs的依赖方式,确保代码可以互相依赖服务端如
React翻页器的实现(包含前后端)

目录前端按照上面的思路去设计与写翻页器的函数后端(以java为例) 注意前端首先需要熟悉前端react中table中的属性pagination <Pagination onChange={onChange} total={50} /> <Table bordered columns={columns} rowKey={record => record.id} dataSource={dataSource} pagination={pagination}/> 其中pa
基于 Node.js 实现前后端分离

基本介绍首先从一个重要的概念"模板"说起. 广义上来说,web中的模板就是填充数据后可以生成文件的页面. 严格意义上来说,应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面.模板大致分为前端模板(如ejs)和后端模板(如freemarker)分别在浏览器端和服务器端编译. 由于当场有一部分同学对node.js并不是很了解,这里补充一下node.js的相关知识.官网上的给他的定义事件驱动.异步什么的就不说了.这里借用朴灵书上的一张图来解释一下node.js这个玩意的结构.如果懂
基于Kubernetes实现前后端应用的金丝雀发布(两种方案)

公司的研发管理平台实现了Gitlab+Kubernetes的Devops,在ToB和ToC场景中,由于用户量大,且预发布环境和生产环境或多或少存在差异,使得生产环境发布版本的时候还是存在很多不确定性和很大的风险.于是需求方就提出了支持金丝雀发布的需求,金丝雀发布方案有很多,以下为两种常用的方案. 1.Deployment滚动更新策略实现金丝雀发布利用Deployment的滚动更新策略maxSurge和maxUnavailable设置最大可超期望的节点数和最大不可用节点数可实现简单的金丝雀发布.
聊聊Flare应用前后端性能优化问题

目录写在前面应用性能问题分析对于我不适用的功能前端架构中的问题后端架构中的问题针对应用进行改进调整前端实现调整后端实现图标资源优化容器镜像的优化额外的优化最后两周前,在给颜值在线的 flame 提交了几个 PR 之后,我将它封装成了容器,用于书签和在线应用的管理. 但是在迁移个人书签的过程中,我发觉 flame 在性能上的表现并不是特别好,于是我做了一个改良版:flare. 写在前面在聊 flare 之前,我想先聊聊 flame. flame 是一个颜值在线的导航页项
react Suspense工作原理解析

目录 Suspense 基本应用 Suspense 原理基本流程源码解读 - primary 组件源码解读 - 异常捕获源码解读 - 添加 promise 回调源码解读-Suspense 首次渲染 primary 组件加载完成前的渲染 primary 组件加载完成时的渲染利用 Suspense 自己实现数据加载 Suspense 基本应用 Suspense 目前在 react 中一般配合 lazy 使用,当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成.其中
详解前后端分离之Java后端

前后端分离的思想由来已久,不妨尝试一下,从上手开始,先把代码写出来再究细节. 代码下载:https://github.com/jimolonely/AuthServer 前言以前服务端为什么能识别用户呢?对,是session,每个session都存在服务端,浏览器每次请求都带着sessionId(就是一个字符串),于是服务器根据这个sessionId就知道是哪个用户了. 那么问题来了,用户很多时,服务器压力很大,如果采用分布式存储session,又可能会出现不同步问题,那么前后端分离就很好的解
基于vue实现网站前台的权限管理(前后端分离实践)

Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si