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



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

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

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

尝试使用重新选择。 它支持记忆,我认为这就是你要找的。

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

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

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

问:是否可以使用不带 Redux 的重新选择?答:是的。重新选择对任何其他包都没有依赖关系,所以尽管它被设计为 与Redux一起使用,它可以独立使用。目前正在 在传统的 Flux 应用程序中成功使用

最新更新