如何在不闪烁/重新加载网站的情况下在 React 中动态注入样式表？答案

【问题标题】：How can I dynamically inject a stylesheet in React without the website flickering/reloading?如何在不闪烁/重新加载网站的情况下在 React 中动态注入样式表？
【发布时间】：2020-01-08 12:58:19
【问题描述】：

我有一个 React 应用程序 (next.js)，它从 GET 请求接收样式表，然后将其附加到网页。

当我在样式表中加载时，受该样式表影响的元素会重新呈现，即使它们没有更改。例如，样式表包含 h1 标签的全局样式，但样式与当前样式没有区别，但仍会重新渲染。

有什么方法可以防止这种重新渲染/闪烁/重新加载，以便为用户提供无缝的浏览体验？

【问题讨论】：

加载样式表不应导致页面重新呈现。也许还有其他问题？

标签： javascript css reactjs stylesheet next.js

【解决方案1】：

尝试使用 reselect。它支持记忆，我认为这就是你要找的。p>

React 使用浅比较来比较对象。当应用程序从服务器下载新数据时，它会收到一个带有样式数据的新对象。 React 将它与当前的 props 进行比较。即使这个对象有相同的数据，对于 React 来说它也是一个新的对象，所以它决定重新渲染组件。

使用重新选择，我们保存了我们之前收到的最后一个对象，并将其与新对象进行比较。如果新对象具有完全相同的结构，则重新选择会将旧对象（记忆对象）发送到组件。这样组件将接收到相同的对象，并且不会重新渲染。

reselect 通常与 Redux 一起使用，但根据他们的常见问题解答，它可以独立使用：

问：我可以在没有 Redux 的情况下使用 Reselect 吗？ 答：可以。 Reselect 不依赖于任何其他包，因此尽管它被设计为与 Redux 一起使用它可以独立使用。目前正在在传统 Flux 应用中成功使用

【讨论】：

React 使用浅比较来比较对象。当应用程序从服务器下载新数据时，它会收到带有样式数据的新对象。 React 将其与当前的道具进行比较。即使这个对象有相同的数据，对于 react 来说它也是一个新的对象，所以它决定重新渲染组件。使用重新选择，我们保存了我们之前收到的最后一个对象，并将其与新对象进行比较。如果结构完全相同，则重新选择将旧对象（记忆对象）发送到组件。这样组件接收相同的对象，它不会被重新渲染。
你假设 OP 完全使用 redux。
根据他们的常见问题解答：问：我可以在没有 Redux 的情况下使用 Reselect 吗？答：是的。 Reselect 不依赖于任何其他包，因此尽管它被设计为与 Redux 一起使用，但它可以独立使用。它目前已在传统 Flux 应用中成功使用。