2

在我的应用程序中，我有两个大型组件，其中包括很多面板，每个面板都有几个或更多其他组件。这需要很长时间才能渲染。我猜1-2秒。

这是如何工作的一个简单示例。我有 2 个标签，我们可以称它们为 tab1 和 tab2。如果我点击 tab1，我将渲染 DummyPanel，如果我点击 tab2，我将渲染 ResponsivePanel。问题是，这些面板的渲染速度很慢，应用程序将冻结 1-2 秒。

所以我需要一些东西如果我渲染这些组件，它会设置加载，当组件准备好时，它会渲染它们。或者将渲染前 5 个面板并逐渐休息。

我发现 React.lazy + Suspense。在加载和第一个选项卡交换（tab1/tab2）时效果很好。它将设置加载，然后渲染组件。但问题是它只会在第一次尝试时起作用，如果我开始在选项卡之间交换后它会停止使用延迟加载 + 悬念。它只是冻结了一秒钟，然后重新渲染面板。

我猜是因为缓存，应用程序会下载部分。缓存它们并停止再次悬念。

所以问题是，有没有办法解决这个问题，在每个标签交换上强制懒惰+暂停？或者你们知道更好的解决方案吗？总是先加载加载，然后加载组件，或者它会渲染前 5 个面板，然后慢慢渲染其余的面板？

代码片段，我在其中渲染 suspense + 惰性组件。如果 tabIndex === 0 或 1，则只有“if”语句。所以 tab1 是 tabIndex = 0，而 tab2 是 tabIndex = 1

    const SortableDummyPanels = lazy(() =>
  import("../containers/SortableDummyPanels")
);
const SortableResponsivePanels = lazy(() =>
  import("../containers/SortableResponsivePanels")
);

  return (
<div>
  <div>
    {tabIndex === 0 && (
      <Suspense fallback={<div>Loading...</div>}>
        <SortableDummyPanels />
      </Suspense>
    )}
  </div>
  <div>
    {tabIndex === 1 && (
      <Suspense fallback={<div>Loading...</div>}>
        <SortableResponsivePanels />
      </Suspense>
    )}
  </div>
</div>

);

4

0 回答 0