问题标签 [react-suspense]

我有以下组件：在这个组件中，有一个图像。当我加载页面时，我意识到将首先加载页面，然后再加载图像。如何在加载图像之前暂停整个页面？我曾尝试使用后备方法将整个 div (id="container") 包装在 Suspense 组件中，但它似乎不适用于图像，并且仅适用于组件。

如何在加载内部图像之前暂停整个组件？

我正在开发一个应用程序，如果下一页有任何尚未加载的延迟加载组件，我们希望延迟页面之间的转换。所以我试图弄清楚是否有任何方法可以可靠地检查延迟加载的组件是否已经完成加载。

该解决方案有效，但仅在延迟加载组件第一次尝试加载时才有效——即，如果它立即呈现，因为延迟加载组件已经加载，则不会。

该组件在第一次加载时onLoad正确调用。onComplete然而，在随后的时间里，因为延迟加载的组件现在被缓存了，孩子们被立即渲染并且永远不会渲染回退，这意味着永远不会被调用。onLoadonComplete

我尝试过的一件事是Trigger在主体内放一秒SuspenseTrigger：

这不起作用，因为Suspense即使其他元素没有完全加载，子元素也会立即渲染。因此onLoad，onComplete无论 Suspense 是否完成加载，都会立即被调用。

为了解决这个问题，我还尝试了一些更高级的状态检查（PasteBin 上的代码）。主要的困难是检查后备是否已经呈现，我无法弄清楚如何可靠地做到这一点。我试过在检查之前等待 100 毫秒，但由于某种原因，即使这样也不能可靠地工作。也许有可能useRef？

有任何想法吗？

这是我的代码示例

我遇到的问题是，我希望在运行第二次测试时拥有加载器，但它不存在因此引发错误。

我想知道为什么加载器没有在第二个测试中呈现，它立即呈现登录页面。我怀疑第一个测试会影响第二个测试，但问题是为什么。

我在这里创建了一个对此问题的回复。https://repl.it/@tibetegya/Create-React-App

我正在尝试使用 react suspense，但是在对 react index.js 文件进行更改后，我遇到了一些关于渲染的问题，并且我已经安装了 react suspense "npm install react@experimental react-dom@experimental"

我的 index.js 文件

索引.js 文件

错误

错误图像

我正在构建一个具有该SSR功能的反应应用程序，我正在使用React.Suspense客户端进行代码拆分，我收到了这个警告。

App.js我在客户端有我的文件： -

我也有App.js服务器端的文件，但我没有React.Suspense在那里使用，因为服务器不支持它。该文件如下所示：

我的应用程序在服务器上完美呈现，但在客户端，我得到了Warning，当我删除Suspense客户端App.js文件时，一切正常。

谁能帮我解决这个问题？

我们如何使用React.lazy()和Suspense在下面的例子中。我从FirstComponent.js. 如何使用 FirstComponent 值添加newNumber和显示总数。所以每次渲染时，我们应该根据接收到的随机值得到不同的总数。那可能吗 ？

https://codesandbox.io/s/condescending-lamarr-ny680?file=/src/App.js:0-635

FirstComponent.js

SecondComponent.js

Cordova如果我删除延迟加载，则在应用程序中实现React lazy加载时会出现白屏，Suspense它工作正常。

我制作了一个LoaderPage看起来像这样的组件

我试图将它作为我的路由器组件中的 Suspense 的后备组件，但LoaderPage在任何其他延迟加载的组件加载之前该组件不会显示

当我复制粘贴 LoaderPage组件并将其保存在我的路由器组件中而不是导入它时，它可以工作。

请帮忙。

我正在考虑实现一个加载屏幕来检查是否加载了所有组件，但遇到了这种奇怪的模式。使用下面的代码，我进入App false控制台启动，在 delayHTML 函数返回数据 2000 毫秒后，我得到LoadComponent mount event和App true.

但随后它又回到了 suspense 回退，我又得到了 2000 毫秒，其中LoadComponent mount event和App true消息再次出现，看起来像是第二次渲染。我怎样才能避免这种情况？

EventBus 只是 EventListener。delayHTML 暂停，直到达到 2000 毫秒以返回文本值。

• 操作系统：

MacOS Catalina 10.15.6

• 节点版本：

v12.18.3

• NPM 版本：

6.14.7

• 网络包版本：

4.44.1

• terser-webpack-plugin 版本：

3.1.0

预期行为

使用 TypeScript（刚刚在现有的 React 项目中配置），我希望 TerserPlugin 的子依赖“jest-worker@26.3.0”不会破坏路由的代码拆分。

实际行为

按路由进行代码拆分（在 TypeScript 配置之前工作正常，但使用 TerserPlugin），它只是不再为路由创建块。它只发生在生产中。Bundle.js 变得更大，并且没有路由块（0.bundle.js、1.bundle.js 等）

代码拆分通过文档https://reactjs.org/docs/code-splitting.html#code-splitting使用 Suspense/lazy 。

代码

webpack.mode-production.js：

这是 iTerm 输出“$ npx webpack --mode=production”

在“webpack --mode=development”中，iTerm 中存在相同的错误，但会创建路由块。仅在 prod 模式下出现问题。

我们如何繁殖？

• 如上所述配置 TerserPlugin。
• 配置代码拆分 Suspense/lazy，生成路由块（0.bundle.js 等），就像在 React 文档中一样：

• 配置 TypeScript：

包.json：

tsconfig.json：

我测试了删除 TerserPlugin 的案例（删除了整个 webpack.optimization 部分）和 TypeScript，然后代码拆分工作正常。我还没有找到任何可以解决问题的 TypeScript 配置（消除 iTerm 中的错误，并修复代码拆分）。

也许有一些解决方法，或者我错过了什么？

提前致谢。