React 延迟加载昂贵的材料-ui 模态

Question

我有昂贵的material-ui模态组件，需要大约1秒的时间来渲染，我尝试使用Suspense和React.lazy来延迟加载，但它对我不起作用，如果我理解正确的话，它只会延迟加载导入（？）

关于模态组件，没有从 api 或任何东西获取，只是许多内部带有钩子和材料 UI 的组件，并且数据作为 props 传递

我现在的流程：

1. 我点击按钮
2. 1秒过去了
3. 一切都已加载并且模式打开

我想要实现的目标”

1. 我点击按钮
2. 模态立即弹出并显示某种加载屏幕
3. 组件准备好后就会显示

我怎样才能在反应中做到这一点？

Answer 1

您可以在模态组件中应用简单的检查并有条件地渲染它。因此，假设如果您有三个数据，则只有在加载所有数据时才可以在返回数据下方使用三元运算符，如果没有加载则显示加载组件 示例代码可能会让您清楚我想说的内容。就我而言，数据来自 API，因此我检查该数据是否已加载。

   function ModalComponent(data1, data2, data3){
    
      /////// other code //////
        return (
        <div>
        {data1 && data2 && data3 ? (
           <div>Your data </div>
        ) : <div>Loading....</div>
        }
        </div>)
    }
export default ModalComponent

Answer 2

像这样的东西应该可以完成你的工作：

<Dialog {...dialogProps}>
    <Suspense fallback={<Loader/>}>
        <LazyLoadedExpensiveComponent/>
    </Suspense>
</Dialog>