如何在React中动态注入样式表,而不会导致网站闪烁/重新加载?

问题描述 投票:0回答:1

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

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

是否有办法防止这种重新渲染/闪烁/重新加载,以便为用户提供无缝的浏览体验?

javascript css reactjs stylesheet next.js
1个回答
0
投票

尝试使用reselect。它支持记忆,我认为这就是您想要的。

React使用浅表比较来比较对象。当应用程序从服务器下载新数据时,它会收到一个包含样式数据的新对象。 React将其与当前道具进行比较。即使该对象具有相同的数据,对于React来说,它也将是一个新的对象,因此它决定重新渲染该组件。

使用重新选择,我们保存了之前收到的最后一个对象,并将其与新对象进行比较。如果新对象具有完全相同的结构,则重新选择会将旧对象(已存储的对象)发送到组件。这样,组件将接收相同的对象,并且不会重新呈现。

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

问:我可以在没有Redux的情况下使用重新选择吗?答:可以。重新选择不依赖于任何其他程序包,因此尽管它被设计为与Redux一起使用时,可以单独使用。目前正在在传统的Flux应用程序中成功使用]

© www.soinside.com 2019 - 2024. All rights reserved.