reactjs - 延迟渲染直到所有资源加载的系统方法

Question

我使用 Webpack 4、Babel 7、React 16.8。我的应用程序加载 Google Web 字体，以及当用户加载我的页面时参与初始渲染的许多组件所需的外部图像。

我使用 sass 文件加载字体，如下所示:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');

我在所有组件中使用图像，如下所示:

import SearchSvg from '../../images/search_icon.svg';

并像这样使用它们:

<img src={ SearchSvg } />

现在我知道了<img onLoad=.....>我知道有一些软件包可以测试网络字体是否已经加载。我的问题是:是否有任何系统方式/模式来获取React组件的初始渲染，直到加载所有这些外部资源？

现在我使用setTimeout与 500 ms延迟我的index.js中的根渲染。

setTimeout(function() {
    render(
        ...
    );
}, 500);

我希望用真正知道何时加载所有内容的值来替换这个硬编码值 - 理想情况下无需在我使用的每个组件中添加代码。

动机当然是为了在我最初渲染应用程序时避免字体/图像闪烁 - 由于渲染时图像/字体尚未完全加载。

Answer 1

您可以在触发 onload 事件后渲染根组件。

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets images. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

window.onload = function() {
   ReactDOM.render(<App/>, document.getElementById('root'));
};

如果您的目的是提高性能，那么我强烈建议考虑服务器端渲染。