javascript - 如何在react-native中异步渲染大型组件

标签 javascript reactjs react-native

我有一个大型组件,它在 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/

相关文章:

node.js - 我如何告诉 heroku 我的 server.js 和 package.json 在一个文件夹中?

javascript - 如何将 props 传递给 ListHeaderComponent?

javascript - `["length"]` 是如何工作的?

javascript - 如果我在 express.js 中省略 next() 会怎样?

php - Ajax 重新加载不起作用

javascript - 糟糕的 ComponentDidMount 函数占用了我每天 95000 次的调用 - ReactJS

javascript - 用javascript react 显示相对时间

reactjs - 使用 Jest/Enzyme 的 FlatList 测试

reactjs - 将参数传递给标签导航器React Navigation 5

javascript - 每个 EmberApp 的单独 index.html 文件