我正在研究 <Suspense>
和 React.lazy()
概念,我想更好地理解为了向现有应用程序添加一些逻辑会发生什么。
让我们从定义开始:
The React.lazy function lets you render a dynamic import as a regular component.
(render 由我突出显示)
和
If the module containing the OtherComponent is not yet loaded by the time MyComponent renders, we must show some fallback content while we’re waiting for it to load[...]
(已加载由我突出显示)
现在,Suspense
定义使用术语加载,lazy()
使用渲染。
让我们为这个概念添加一些代码。
const ComponentOne = React.lazy(() => import("./ComponentOne"));
const ComponentTwo = React.lazy(() => import("./ComponentTwo"));
function BigBang() {
return (
<Suspense fallback={<SplashScreen/>}>
<section>
<ComponentOne/>
<ComponentTwo/>
</section>
</Suspense>
);
}
很好。我们的想法是延迟加载 ComponentOne 和 ComponentTwo。 虽然此过程尚未结束,但我们将显示 SplashScreen。
问题 现在,假设我将一些本地镜像导入到 ComponentOne 和 ComponentTwo 中(我将只为一个添加代码,让我们假设另一个有类似的东西):
import avatar from "../../img/avatar.svg";
import logo from "../../img/logo.svg";
export default class ComponentOne extends React.Component {
componentDidMount() {
console.log("ComponentOne@componentDidMount");
}
render() {
console.log("ComponentOne@render");
return (
<div style={{display: 'none'}}>
<img src={avatar}/>
<img src={logo}/>
</div>
);
}
}
现在应该清楚我想问的是什么了:
加载所有导入后,SplashScreen 是否消失?换句话说,当 SplashScreen 消失时,我是否可以假设 ComponentOne 和 ComponentTwo 中的所有图像都已加载?
这是主要问题。
第二个问题(这似乎与我有关,但如果不是我可以打开另一个线程)是:如果对上一个问题的回答是“否”,确保图像/字体的最佳策略是什么/“api response”/“other resources”在渲染之前加载,可能因为已经存在的流而维护逻辑?直接fetch()
目前不支持到资源。
最佳答案
Suspense
等待获取动态导入的组件文件(比方说 0.js
)。
现在,一旦 0.js
加载并开始解析,Suspense
就会停止显示 SplashScreen
并委托(delegate)控制您的组件。接下来发生的任何事情都不是延迟加载。这就像您执行静态导入时会发生的情况。
在您的情况下,只有在 SplashScreen
消失后才会加载这两个图像。现在,如果你想预加载/延迟加载图像,有几种方法可以继续。
1) 如果您使用的是 webpack,则可以使用 url-loader
将图像内联为 data-uri
。但请注意,这可能会增加您的包大小,并且您还会失去通常是静态的图像的浏览器缓存。
2) 对于 svg,您可以使用 inline-react-svg
babel 插件,它将 svg 转换为 react 组件,以便它成为您的包的一部分 (0.js
)。但它也有上述相同的权衡。
因此预加载图像有其自身的权衡。可能有更好的替代方案,例如可以轻松完成的延迟加载,也可以从几个第三方库中获得 React HOC。
关于javascript - 关于 React、Suspense、lazyLoad 和预加载/渲染元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56475103/