React -在JSX中使用异步函数进行渲染？

在JSX中使用异步函数进行渲染是指在React组件的渲染过程中，使用异步函数来处理一些耗时的操作，以避免阻塞主线程，提高用户体验。

在React中，可以使用异步函数进行渲染的方式有两种：使用React.lazy()和Suspense组件，以及使用React的异步组件。

使用React.lazy()和Suspense组件： React.lazy()是React 16.6版本引入的新特性，它可以让我们动态地导入组件。结合Suspense组件，可以实现在组件渲染过程中异步加载其他组件。

具体步骤如下：

使用React.lazy()函数动态导入需要异步加载的组件，例如：const MyComponent = React.lazy(() => import('./MyComponent'));
在组件的渲染过程中，使用Suspense组件包裹需要异步加载的组件，并设置fallback属性，指定在异步加载完成前显示的占位内容，例如：<Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense>

这样，当组件需要渲染时，React会自动异步加载MyComponent组件，并在加载完成后进行渲染。

使用React的异步组件：除了React.lazy()和Suspense组件，React还提供了另一种方式来使用异步函数进行渲染，即使用React的异步组件。

具体步骤如下：

创建一个异步组件，可以是一个类组件或函数组件，例如：const MyAsyncComponent = React.lazy(() => new Promise(resolve => setTimeout(() => resolve(import('./MyComponent')), 2000))));
在组件的渲染过程中，使用React.Suspense组件包裹异步组件，并设置fallback属性，指定在异步加载完成前显示的占位内容，例如：<React.Suspense fallback={<div>Loading...</div>}> <MyAsyncComponent /> </React.Suspense>

这样，当组件需要渲染时，React会自动异步加载MyAsyncComponent组件，并在加载完成后进行渲染。

以上是在JSX中使用异步函数进行渲染的两种常见方式。这些方式可以帮助我们优化React应用的性能，提高用户体验。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云CDN加速（CDN）：https://cloud.tencent.com/product/cdn
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（移动开发）：https://cloud.tencent.com/product/mobdev
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云直播（直播）：https://cloud.tencent.com/product/live

页面内容是否对你有帮助？

有帮助

没帮助

React -在JSX中使用异步函数进行渲染？

reactjs、promise、jsx、firebase-storage、es6-promise

如何在组件的返回中使用promise函数，如下所示： function MyComp () { <div> </div>} 因此，结果将是： <div>urlFromFirebase</div> 即使我在同一个组件中有多个promises，我也必须使用useState

浏览 57提问于2021-10-23得票数 0

1回答

为什么我不能将通用JSX传递给react中的封装组件？

reactjs、typescript

我正在使用带有typescript的React15。下面是我的代码：我定义了一个接受任何react组件的WrappedComponent方法。我想知道如何

浏览 32提问于2018-08-17得票数 1

2回答

类型'Element | undefined‘不能赋值给类型'FC<any> | undefined’

reactjs、typescript、react-native

在此MainHeader组件中： LeftButton={/>interface MainHeaderProps { LeftButton: React.FC<any&

浏览 2提问于2020-01-04得票数 1

1回答

从数据库呈现数据

javascript、reactjs、react-native、async-await、cross-platform

假设我想要从firebase数据库中获取某人的名字，以便在JSX中为React Native项目呈现。</Text> </View>) 其中name是存储在实时数据库中的一些数据。要获取"name“变量，我需要对数据库进行异步调用。但是，我只想在name的值正确的情况下呈现JSX。我该怎么做呢？当尝试这样做时，我会得到一个错误，因为在渲染时，由

浏览 16提问于2021-09-13得票数 0

1回答

有一个名为TableViewCotroller的控制器，它是用typescript编写的，也包含JSX代码。该控制器负责执行任何与表相关的操作。这个控制器看起来像这样： import * as React from 'react'; export class TableViewController extends BaseViewControllerTableCommandingController之后，我在TableViewController中添加了一个名为tableComman

浏览 33提问于2021-09-29得票数 0

3回答

如何使用React钩子修复forEach()中多个调用获取数据

reactjs、react-hooks

在react Hooks中，我试图从API数组中获取数据，但在Foreach函数中，API调用导致无限。如何解决这个问题？symbol){ .then(chart => chart.json())} 在这里，在无限中调用

浏览 0提问于2020-10-07得票数 1

2回答

var = (<div>Rome</div>)这种语法在ReactJS中是如何工作的？

reactjs

我知道应用程序的内容最终会被React编译器用来生成浏览器可以理解的createElement类代码。我不明白的是赋值给app变量的语法，它甚至不是一个有效的javascript语法。

浏览 0提问于2018-07-17得票数 0

1回答

路径的道具"/“不是在现场呈现吗？

reactjs、react-router-dom

index.js:1警告:函数作为React子函数无效。如果返回组件而不是呈现，则可能会发生这种情况。或者您打算调用这个函数，而不是返回它。/MyComponents/About";import { BrowserRouter as Router, Routes, Route } from "react-r

浏览 3提问于2021-12-03得票数 2

回答已采纳

4回答

是否需要为无状态功能组件导入React？

javascript、reactjs、ecmascript-6

在我周围(例如博客文章、代码)，我看到了用于响应无状态功能组件的代码，其中导入了React，尽管它从未被使用过。import React from 'react'; return <div>Howdy!</div>;我想知道，当未实际使用它(以任何显式方式)时，我们为什么需要导入React。我也很惊

浏览 6提问于2017-05-23得票数 29

回答已采纳

2回答

/app/main.js模块构建失败: SyntaxError:意外令牌(10:18)中的错误

javascript、reactjs

当我使用“webpack”时，下面的错误. 8 | > 10 | ReactDOM.render<div><i> import React from 'react'; export default class Hello extends React.Component

浏览 2提问于2017-01-12得票数 1

1回答

bundle.js 404 (未找到)

node.js、webpack

我试图捆绑我的反应应用程序，使用webpack进行客户端渲染，并将bundle.js包含在标签中。然而，每当我运行我的应用程序时，我都会得到bundle.js的404 (找不到)。/views/Index.jsx指向我的主模板文件，如下所示：import React from 'react'; import Layout from '.title={this.props.title

浏览 0提问于2017-09-10得票数 2

回答已采纳

1回答

function抱怨当我的组件被传递到另一个组件以呈现时，没有在body函数的内部使用钩子。

javascript、reactjs、react-hooks

我有一个组件，它使用另一个组件作为呈现器。但是，React不允许我在呈现器组件中使用钩子，因为它会引发以下错误：const RendererComponent = (props) => { const { enabled,

浏览 1提问于2021-12-15得票数 1

回答已采纳

1回答

React错误：“渲染的钩子比上一次渲染时多”

javascript、reactjs

我在我的组件中使用了react挂钩(useHistory、useState)。columns} dataSource={tableData} pagination={false} bordered /> ); } 从本质上讲，我想通过单击最后一列中的删除图标来删除表行

浏览 26提问于2021-08-09得票数 1

1回答

将元素定义为方法、常量或组件？

javascript、reactjs

<p>Some Elements</p></div>然后像这样使用它们<div> {getSomeElements()}</div> 我的问题是:在

浏览 2提问于2020-05-20得票数 1

回答已采纳

2回答

StencilJS:缺少JSX类型的"h“导入

javascript、jsx、web-component、stenciljs、tsx

我正在尝试使用模板创建一个web组件，在TSX文件中使用h1标签时，我得到了以下错误： In order to load accurate JSX types for components, the "h" funct

浏览 2提问于2020-04-20得票数 2

1回答

即使在命中行时，代码覆盖率也会丢失。

javascript、reactjs、react-hooks、jestjs、enzyme

正在导入isValid函数。有一个强制性的100%的代码覆盖在这个项目，我不能绕过。正在测试的组件 import React from &#

浏览 5提问于2022-02-28得票数 2

2回答

用KonvaJs动态地呈现对象

javascript、reactjs、konvajs、konvajs-reactjs

我想在KonvaJ的帮助下呈现一系列的，而不知道我在特定时刻绘制的是哪个对象。具体来说，下面是我的代码：class CWall extends React.Component { return (<React.Fragment> <Transformer /*some props*/&g

浏览 1提问于2020-03-21得票数 1

回答已采纳

1回答

如何防止React函数组件在异步请求过程中闪烁

javascript、reactjs

在下面的React函数组件返回任何JSX之前，它会检查当前用户的AWS Cognito。用户数据是异步获取的，因此在组件使用登录用户的JSX重新呈现之前，无用户的标记会快速闪烁。在呈现函数组件之前，有没有更好的方法来异步获取数据？import React, { useState, useEffect } from 'react'; import { Auth }

浏览 0提问于2020-11-02得票数 0

1回答

为什么React要重新呈现组件，即使更改的属性或状态与JSX无关？

reactjs

为什么React会在组件的属性或状态更改时重新呈现组件，即使更改后的属性或状态与返回的JSX无关？我从官方文档中读到了React Reconciliation。考虑下面给出的简单的虚拟代码，其中myState是App组件的一种状态，它与返回的JSX没有关系，但如果myState得到更新(发生在buttonClickHandler内部)，React将重新呈现Appimport React, { useState } from "react&q

浏览 14提问于2021-07-15得票数 0

回答已采纳

1回答