Question

我有一个大型组件，它在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
  })
};

Answer 1

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

谢谢。

Answer 2

在pressHandler中，设置状态之前，请先睡2-3秒。

由于您无法发布组件的代码，因此我不会编写完整的代码，但这是一般的想法：

将this.state.showComponent初始化为false，将this.state.isLoading初始化为false
按下按钮时，将this.state.isLoading设置为true。这将导致render()显示微调器/加载消息
睡眠结束后，将this.state.isLoading设置为false，将this.state.showComponent设置为true

顺便说一句，睡眠可以通过以下方式实现：

pressHandler = () => {
  setTimeout(() => {
    this.setState({ isLoading: false, showComponent: true }); 
  }, 3000);
}

我如何在React-native中异步呈现大型组件

2 个答案: