EmotionCSS 清理生成的类

Question

当使用 EmotionCSS 中的 css prop 时，它会生成一个具有随机哈希名称的 CSS 类，并将其添加到 DOM 的头部（据我所知）以及浏览器兼容性的各种变体。

有没有办法让 CSS 不以这种方式缓存某些样式，或者明确要求它清理它们？ （我知道可以通过直接选择这些来手动执行此操作，但这似乎不是最佳选择）

问题是我有一些简单的粒子系统，它需要生成许多独特的临时类和动画。这本身就足够昂贵，但内存泄漏并没有什么帮助。

如果无法缓解，这很公平，但是处理这个临时 CSS 的最佳方法是什么？

如有任何建议，我们将不胜感激。 :)

Answer 1

如果您使用 EmotionCSS 并生成大量临时类（例如粒子系统中的动画），随着时间的推移，它确实会导致性能问题或内存泄漏。不幸的是，EmotionCSS 没有提供自动“清理”未使用样式的内置方法。但是，以下是一些管理或缓解该问题的方法：

1. 重用类

如果可能，不要为每个元素动态生成新样式，而是尝试重用现有样式。例如，预定义一组动画样式并在粒子实例中重复使用它们。这样，您就可以减少生成的独特样式的数量。

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const particleStyle = css`
  animation: bounce 1s infinite;
`;

<div css={particleStyle}>Particle</div>;

2. 动态删除样式

对于完全临时的样式，您可以使用 Emotion 的

Global

组件或原始 JavaScript 手动将样式注入到 DOM 中，并在不再需要时将其删除。

使用

Global

的示例：

/** @jsxImportSource @emotion/react */
import { Global, css } from '@emotion/react';
import { useEffect, useState } from 'react';

function TemporaryStyles() {
  const [styles, setStyles] = useState('');

  useEffect(() => {
    const tempStyles = `
      @keyframes fade {
        from { opacity: 1; }
        to { opacity: 0; }
      }
      .temp {
        animation: fade 2s;
      }
    `;
    setStyles(tempStyles);

    return () => setStyles(''); // Cleanup on unmount
  }, []);

  return <Global styles={css`${styles}`} />;
}

使用原始 JavaScript 的示例：

如果您不依赖于这种特定情况的 Emotion，您可以手动添加和删除

<style>

标签：

function injectTemporaryStyle(cssString) {
  const style = document.createElement('style');
  style.innerHTML = cssString;
  document.head.appendChild(style);
  return () => style.remove(); // Cleanup function
}

// Example usage:
const cleanup = injectTemporaryStyle(`
  @keyframes tempAnimation {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
  }
  .temp {
    animation: tempAnimation 1s infinite;
  }
`);

// Cleanup later when done
cleanup();

3. 考虑内联样式

对于不需要共享的动画或临时样式，内联样式可能是一个不错的选择。虽然他们不会从 Emotion 的哈希或类重用中受益，但他们避免向 DOM 添加额外的节点。

const inlineStyle = {
  animation: 'bounce 2s infinite',
  '@keyframes bounce': {
    '0%': { transform: 'translateY(0)' },
    '50%': { transform: 'translateY(-10px)' },
    '100%': { transform: 'translateY(0)' },
  },
};
<div style={inlineStyle}>Particle</div>;

4. 切换到具有范围清理功能的 CSS-in-JS 库

如果 EmotionCSS 不能很好地满足您的特定用例，像

styled-components

这样的库或注入 JavaScript 的普通 CSS 可能会提供更大的清理灵活性。或者，探索像

JSS

这样的工具，可以更直接地控制样式的生命周期。

---

通过显式管理样式的生命周期，或选择可重用或内联解决方案，您可以有效缓解性能和内存问题。