我有一个大型组件,它在 onPress
事件之后呈现,但我想显示一些“正在加载...”,直到该组件准备好渲染为止。
假设我已经导入了大组件
import LargeComponent from '../components/LargeComponent'
state={
showComponent: false
}
当我按下按钮时,它会卡住 1 到 2 秒,然后渲染组件 所以,我想异步渲染组件并且我想显示一些加载 直到组件准备好渲染
<Button onPress={this.pressHandler} title='show component'/>
{this.state.showComponent ? <LargeComponent/> : null}
pressHandler = () => {
this.setState({
showComponent :true
})
};
最佳答案
React.lazy()
采用一个函数作为其参数,该函数必须通过调用 import() 来返回一个 Promise 来加载组件。返回的 Promise 解析为一个具有包含 React 组件的默认导出的模块。您还可以为它创建一个 HOC 并重新使用它..
使用 React.lazy()
的效果如下:
import React, { Suspense } from "react";
const LazyLargeComponent = React.lazy(() => {
return new Promise(resolve => setTimeout(resolve, 5 * 1000)).then(
() => import("../components/LargeComponent")
);
});
export default function LargeComponent() {
return (
<div>
<Suspense fallback={<div>loading...</div}>
<LazyLargeComponent />
</Suspense>
</div>
);
}
欲了解更多信息,请查看react-api reactlazy
谢谢。
关于javascript - 如何在react-native中异步渲染大型组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55878654/