React - 在显示组件之前等待来自 CDN 的资产？答案

【问题标题】：React - wait for assets from CDN before showing component?React - 在显示组件之前等待来自 CDN 的资产？
【发布时间】：2023-01-20 09:36:19
【问题描述】：

我正在从外部 CDN 加载样式表，以便在 React 中设置一个页面的样式。样式表链接被注入<head> 使用react-helmet：

<Helmet>
  <link rel="stylesheet" href="example.com/site.css" />
</Helmet>

不幸的是，在加载样式表之前，有几毫秒可见的 FOUC。我正在集成一个外部服务，所以我无法以任何其他方式真正加载样式。

我已经尝试使用 useEffect 挂钩并仅在准备就绪时呈现页面，如下所示：

const [isPageReady, setPageReady] = useState(false);

useEffect(() => {
  setPageReady(true);
}, []);

return ( 
  isPageReady && ( // my page );
)

但是 FOUC 仍然存在。有没有办法在我显示页面之前等待样式表加载？

【问题讨论】：

您是否尝试过使用rel="preload"？

标签： css reactjs react-helmet react-native-stylesheet

【解决方案1】：

本质问题是 CSS 仍在加载，而第一个组件已经在屏幕上。通常这只需要几分之一秒，所以您可能只想隐藏您的组件，直到 DOM 完全呈现。

为此，您可以将所有内容封装在一个顶级 div 中，该 div 在 document.readyState 等于完成之前是不可见的。这样，DOM 的渲染将不可见，第一个暴露的屏幕将是一个完全渲染的文档。

const [visible, setVisible] = useState('hidden');

// This will run one time after the component mounts
useEffect(() => {
  const onPageLoad = () => {
    setVisible('visible');
  };
  // Check if the page has already loaded
  if (document.readyState === 'complete') {
    onPageLoad();
  } else {
    window.addEventListener('load', onPageLoad);
    // Remove the event listener when component unmounts
    return () => window.removeEventListener('load', onPageLoad);
  }
}, []);

return (
  <div style={{ visibility: visible }}>
    <YourPage />
  </div>
);

【讨论】：