为什么样式化组件保留旧类？

Question

我最近尝试从Less切换到styled-components。每次重新渲染样式化的组件时，似乎都在文档头中添加了一个新类。

例如，使用以下代码：

const Loop = () => {
  const [opacity, setOpacity] = useState(100);
  useEffect(() => {
    const id = setInterval(() => setOpacity(opacity => opacity - 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <Test opacity={opacity} />;
};

const Test = styled.div`
  height: 40px;
  width: 40px;
  background: black;
  opacity: ${props => props.opacity / 100};
`;

render(<Loop />, document.getElementById("app"));

css内容每秒都在增长：

在我的真实项目中，我有一些大型CSS类，需要经常更新，并且该Web应用程序需要在浏览器中长时间保持打开状态，因此这可能会破坏交易。 我是在做错事还是正常现象？我在文档中找不到任何内容。

Answer 1

它是从styled-components生成的dynamic class， identical css string should generate the same class。 （但是重新打开应用程序时会生成不同的类）

也就是说，当再次重新渲染组件时，应该为其重用类，并且不会生成其他类。

在this example中，将生成并重用10个类。