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

【问题标题】：React lazy load expensive material-ui modalReact 延迟加载昂贵的材料-ui 模态
【发布时间】：2021-01-16 12:17:00
【问题描述】：

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

关于模态组件，没有从 api 或任何东西中获取，只有许多内部带有 hooks 和 material-ui 的组件以及作为 props 传递的数据

我现在的流程：

我点击按钮
1 秒传球
一切都已加载并打开模式

我正在努力实现的目标”

我点击按钮
Modal 立即弹出并显示某种加载屏幕
组件准备就绪后会显示

如何在反应中做到这一点？

【问题讨论】：

这通常与影响性能的其他代码有关。你可以提供一个codeandbox来展示，应该会更好，说不定到时候你就会发现问题了。
我知道性能可以提高一点，但加载仍然需要一些时间，因为里面有很多组件，这就是为什么我想知道我在问题中所说的是否可以完成，而且我的应用程序很大，所以我将无法提供代码和框
没关系。我可以在 React 中给你一个关键字“useWorker”。也许这有帮助。

标签： reactjs optimization material-ui

【解决方案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

【讨论】：