react-helmet 在运行时更改 head 标签中的 css 有滞后（在显示更新的 css 之前没有 css 1 秒）答案

【问题标题】：react-helmet changing css in the head tag during runtime has lag (no css for 1 sec before it shows updated css)react-helmet 在运行时更改 head 标签中的 css 有滞后（在显示更新的 css 之前没有 css 1 秒）
【发布时间】：2022-02-23 07:44:04
【问题描述】：

这是一个简化的 React 组件，它使用头盔在运行时更新链接 css：

function App() {
  const [brand, setBrand] = useState('nike')
  return (
    <div className="App">
      <Helmet>
        <link rel="stylesheet" href={getBrandStyle(brand)} />
      </Helmet> 
      <div>other contents here</div>
      <!-- omitted the button components that change the brand state by calling setBrand -->
    </div>
  );
}

我最近刚刚使用 react-helmet 作为一种声明性方式来更改 head 标签的子标签，并且使用我上面编写的代码，在切换 css 时，当页面没有 css 样式时会出现瞬间延迟，然后 1 秒后显示更新的 CSS。

即使在页面的初始加载过程中，如果我使用 queryParameters（上面的代码没有显示查询参数方法），例如

https://localhost:3000?brandQueryParam=nike

在品牌 css 出现之前，有 1 秒内没有 css 样式。

您能告诉我我缺少什么以及如何解决这个问题吗？

【问题讨论】：

您所看到的称为 FOUC（无样式内容的 Flash）——如果您要继续沿着这条路走下去，您可能需要包含一个具有独立样式的中间加载页面在加载品牌 CSS 时。
感谢@SteveGomez - 你是对的，我最终添加了一个带有 setTimeout 的中间加载微调器（不确定 setTimeout 是否是最好的解决方案，但现在这已经足够好了）。很高兴知道这个 FOUC，有一个词/首字母缩略词附在这个场景中很好:)

标签： css reactjs react-helmet fouc

【解决方案1】：

这是我想出的解决方案，不确定 setTimeout 是否是最好的解决方案，所以如果其他人知道更好的方法，请分享。

const brands = {
  nike: 'nike2022',
  adidas: 'adidas2017',
  fila: 'fila2020'
};

function App() {
  const [brand, setBrand] = useState('nike')
  const [isLoading, setIsLoading] = useState(false)
  const changeBrandStyleOnClick = (brand) => {
    setBrand(brand)
    setIsLoading(true)
  }

  return (
    <div className="App">
      <Helmet>
        <link rel="stylesheet" 
              onChangeClientState={(newState, addedTags, removedTags) => setTimeout(() => setIsLoading(false), 1500)}
              href={getBrandStyle(brand)} />
      </Helmet> 
      {isLoading && (
        <Overlay>
          <Spinner/>
        </Overlay>
      )}

      {!isLoading && (
        <>
          {Object.keys(brands).filter(b => b !== brand).map(b =>
            (<Button onClick={() => changeBrandStyleOnClick (b)} value={b}>
            <Logo
              alt="default alt name"
              appearance="default"
              name={b}
              size="small"/>
            </Button>))
          }
          <div>other contents here</div>
        </>
      )}
    </div>
  );
}

【讨论】：